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.

The elements don't exist when the script is executed, wrap the script in a `window.onload = function() { /* Script Here */ }` or put the script after the elements that it references. — , Jun 22 '15 at 17:43
possible duplicate of [Where should I put my JavaScript code?](http://stackoverflow.com/questions/4647806/where-should-i-put-my-javascript-code) — , Jun 22 '15 at 17:48
possible duplicate of [Where to place Javascript in a HTML file?](http://stackoverflow.com/questions/196702/where-to-place-javascript-in-a-html-file) — bummi, Jun 22 '15 at 18:01

John Z · Answer 1 · 2015-06-22T17:54:09.330

0

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:

edited Jun 22 '15 at 17:54

answered Jun 22 '15 at 17:45

John Z

26
9

@TinyGiant My bad, I got it to work with jQuery and now op knows that's an option, I'll try to get it to work without it. – John Z Jun 22 '15 at 17:55

score 0 · Answer 2 · answered Jun 22 '15 at 17:56

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>

score 0 · Answer 3 · answered Jun 22 '15 at 18:22

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>

Problems calling external functions in html with javascript

3 Answers3