Problems calling external functions in html with javascript

Question

Problems calling external functions in html with javascript

66 views Asked by Brogan Chaput At 22 June 2015 at 17:40

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.

Original Q&A

There are 3 answers

**Jyan Z** · Answer 1 · 2015-06-22 17:45:47

Jyan Z On 22 June 2015 at 17:45

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:

**AudioBubble** · Answer 2 · 2015-06-22 18:22:42

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>

**meteor** · Answer 3 · 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>

TechQA.

Problems calling external functions in html with javascript

There are 3 answers

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in FUNCTION

Related Questions in GETELEMENTBYID

Popular Questions

Popular Tags

Trending Questions