Question

我正在尝试使用.js文件中的JavaScript代码。当我将此代码保存在脚本标记内的.html文件中时，我的代码工作正常。

将脚本移动到.js文件时，我应该做出哪些更改。

HTML ：

<!DOCTYPE html>
<html>
<head>
    <title>Cat Clicker</title>
    <script type="text/javascript" src="js/app.js"></script>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <div id='cc'><img src="images/cat1.png"><br /></div>
    <div>The number of times you clicked the cat is:</div><br />
    <div id='times'>0</div>
</body>
</html>

JS：

var pic = document.getElementById('cc');
pic.addEventListener('click', function() {
    var count = document.getElementById('times').innerHTML;
    count = parseInt(count) + 1;
    document.getElementById('times').innerHTML = count;
}, false);

Answer 1

您必须将该代码包装在window.onload中，以使其在加载所有DOM元素后运行。

window.onload = function() {
 var pic = document.getElementById('cc');
 pic.addEventListener('click', function() {
     var count = document.getElementById('times').innerHTML;
     count = parseInt(count) + 1;
     document.getElementById('times').innerHTML = count;
 }, false);
}

否则，只需将脚本标记移至</body>

上方的页面底部即可

<!DOCTYPE html>
<html>
<head>
    <title>Cat Clicker</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <div id='cc'><img src="images/cat1.png"><br /></div>
    <div>The number of times you clicked the cat is:</div><br />
    <div id='times'>0</div>
    <script type="text/javascript" src="js/app.js"></script>
</body>
</html>

Answer 2

您的JavaScript代码可能会尝试获取尚未由浏览器呈现的元素。

解决方案＃1

您可以尝试在所有元素都像这样渲染后加载JavaScript文件：

<!DOCTYPE html>
<html>
<head>
    <title>Cat Clicker</title>  
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <div id='cc'><img src="images/cat1.png"><br /></div>
    <div>The number of times you clicked the cat is:</div><br />
    <div id='times'>0</div>
    <script type="text/javascript" src="js/app.js"></script>
</body>
</html>

解决方案＃2

您也可以尝试使用jQuery并执行以下操作：

$(function(){
    // and also convert this to its jQuery counterpart
    var pic = document.getElementById('cc');
    pic.addEventListener('click', function() {
        var count = document.getElementById('times').innerHTML;
        count = parseInt(count) + 1;
        document.getElementById('times').innerHTML = count;
    }, false);
})

如果这些不起作用，请尝试使用Chrome开发者工具并检查js / app.js是否指向JavaScript文件

如何使用js文件中的JavaScript代码

2 个答案: