为什么我的 javascript src 没有在 HTML 中加载？答案

【问题标题】：Why is my javascript src not loading in HTML?为什么我的 javascript src 没有在 HTML 中加载？
【发布时间】：2021-03-17 07:06:23
【问题描述】：

到目前为止，我正在使用 HTML、JS 和 CSS 制作一个每个人都熟悉的简单的无互联网恐龙游戏。我一直在努力解决它，在过去的几个小时里我已经让一切正常了。突然之间，我的按钮无法正常工作，给我一个错误：Uncaught ReferenceError: start is not defined at HTMLButtonElement.onclick 我尝试更改按钮和 ID 的功能，但都没有奏效。我的结论是，无论出于何种原因，我的 script.js 文件都没有与 HTML 文件一起加载，但 .css 文件是。以下代码是 HTML。

    <div id="game">
        <div id="character"></div>
        <div id="block"></div>  
    </div>
    <div>
        <button class="btn btn-secondary" id="button" onclick="start()">Start</button> 
        <button class="btn btn-secondary" id="button2" onclick="pause()">Pause</button>
    </div>

</body>
<p id="paused"></p>
<p id="score"></p>
<script src="script.js"></script>
</html>

下面的代码是任一函数的代码。

function start() {
    document.getElementById("button").innerHTML = 'Jump'
    button.setAttribute( "onclick", "jump()")
    block.classList.add("movement")
}

function pause() {
    pauseStatus = true
}

我不知道问题可能是什么。我没有对文件路径或任何东西进行任何更改，我想不出如何解决这个问题。我已经尝试将 src 路径放在 HTML 中的正文和正文之外，但没有成功。

【问题讨论】：

不要做button.setAttribute( "onclick", "jump()")。请改用button.addEventListener("click", jump);。开发工具提供了一个 Network 选项卡。请确认：资源是否找到（例如 HTTP 200 响应）？如果不是，则请求哪个实际 URL？请validate your HTML —</body>之后的元素无效。 jump 在哪里定义？如果这不是完整的script.js，请确保提供minimal reproducible example。可能原因：Function is not defined - uncaught referenceerror.
把你的放在

标签： javascript html src

【解决方案1】：

你应该尝试将你的脚本标签移动到你的身体内。

    <div id="game">
        <div id="character"></div>
        <div id="block"></div>  
    </div>
    <div>
        <button class="btn btn-secondary" id="button" onclick="start()">Start</button> 
        <button class="btn btn-secondary" id="button2" onclick="pause()">Pause</button>
    </div>

    <p id="paused"></p>
    <p id="score"></p>
    <script src="script.js"></script>
</body>
</html>

Javascript

您还应该注意，Javascript 行应该以分号结尾。

function start() {
    document.getElementById("button").innerHTML = 'Jump';
    button.setAttribute( "onclick", "jump()");
    block.classList.add("movement");
}

function pause() {
    pauseStatus = true;
}

注意 Sebastians 的建议并使用 addeventlistener 进行事件处理也是明智的。

button.addEventListener("click", jump);

【讨论】：