Question

我在game.js下面有以下javascript文件：

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);
}

以及以下html文件：

<!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>

应该检查一天。如果日期为101，则表示“结束”并删除“下一步”按钮。如果介于1和100之间，则会打印当天以及剩余天数。我遇到的问题是它没有做这些事情。即使我将天的值更改为101它仍然显示如下：

天：

要走的日子。

下一个

有人能告诉我我的代码有什么问题吗？

Answer 1

您需要将代码下方的<script>标记放在HTML中。在您的程序中，当它加载game.js时，它不知道您的HTML代码，也不会更改您的HTML。这就是您的代码应该如何：

<!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>

Answer 2

我建议在文档加载后使用jQuery运行javascript以允许元素存在。

$(document).ready(function () {
    // Your Code Here
}

编辑：让它与jQuery JSFiddle:

一起使用

Answer 3

您的脚本需要放在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>

使用javascript

3 个答案: