Problems calling external functions in html with javascript
Question
I have the following javascript file under game.js:
var day = 1;
function new_day(){
check_date();
print_date();
}
function check_date(){
if (day === 101){
document.getElementById("the_end").innerHTML = "The End";
document.getElementById("continue").innerHTML = " ";
};
}
function print_date {
document.getElementById("day").innerHTML = day;
document.getElementById("days_to_go").innerHTML = (100 - day);
}
and the following html file:
<!doctype html>
<html>
<head>
<script language="javascript" type = "text/javascript" src = "game.js"></script>
<script>new_day()</script>
<title>New Day</title>
</head>
<body>
<p>Day: <div id = "day"></div></p>
<p><div id="days_to_go"></div> days to go.</p>
<p><div id="the_end"></div></p>
<p><div id="continue">
<a href="home.html">next</a>
</div></p>
</body>
</html>
It is supposed to check the day. If the day is 101 it says "the end" and deletes the "next" button. If it is between 1 and 100 then it prints the day and how many days are left. The problem I have is that it is not doing either of these things. Even when I change the value of day to 101 It still shows up like so:
Day:
days to go.
next
Can someone tell me whats wrong with my code?
3 answers
solution1
0 2015-06-22 17:45:47
I'd suggest using jQuery to run the javascript once the document loads to allow your elements to exist.
$(document).ready(function () {
// Your Code Here
}
EDIT: Got it to work with jQuery JSFiddle:
solution2
0 2015-06-22 17:56:33
Your script needs to be put after the HMTL body
<body>
<p>Day: <div id = "day"></div></p>
<p><div id="days_to_go"></div> days to go.</p>
<p><div id="the_end"></div></p>
<p><div id="continue">
<a href="home.html">next</a>
</div></p>
</body>
<script type='text/javascript'>//<![CDATA[
var day = 1;
new_day();
function new_day(){
check_date();
print_date();
}
function check_date(){
if (day === 101){
document.getElementById("the_end").innerHTML = "The End";
document.getElementById("continue").innerHTML = " ";
}
}
function print_date() {
document.getElementById("day").innerHTML = day;
document.getElementById("days_to_go").innerHTML = (100 - day);
}
//]]>
</script>
solution3
0
You need to put your <script> tag below your code in HTML. In your program, when it loads game.js , it doesn't know your HTML code, and doesn't change your HTML. This is how your code should be:
<!doctype html>
<html>
<head>
<title>New Day</title>
</head>
<body>
<p>Day: <div id = "day"></div></p>
<p><div id="days_to_go"></div> days to go.</p>
<p><div id="the_end"></div></p>
<p><div id="continue">
<a href="home.html">next</a>
</div></p>
</body>
<script language="javascript" type = "text/javascript" src = "game.js"></script>
<script>new_day()</script>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.