时间戳

首页 > 解决方案 > Javascript 文件未与 HTML 一起加载

javascript - Javascript 文件未与 HTML 一起加载

问题描述

直到几天前，JavaScript 才停止加载我的 HTML 文件，这让我的项目更难工作。我尝试清除缓存，在 Safari 上尝试并重新启动计算机，但没有成功。我得到的唯一错误来自 Chrome 中的开发人员工具，指出未捕获的参考错误（单击按钮时出现）。这是我的 HTML：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<script src="GameManager.js"></script>
<script src="jquery-3.6.0.js"></script>
<link rel="stylesheet" type="text/css" href="soloLeveling.css">

<title>Solo Leveling Game</title>
</head>
<body>

<div id="mainMenu">
    <div id="backstory">
        <h1><U>Backstory</U></h1>
        <p>A very simple game which follows the story line of Solo Leveling by Chu-Gong in which a player will be able to progress through various levels and dungeons to become the strongest!</p>
    </div>

    <div id="howToPlay">
        <h2>How to Play</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id illum et blanditiis commodi. Placeat eaque temporibus dolorem illo, officiis reprehenderit, neque fuga sint doloremque voluptate facere ut labore dolorum explicabo.</p>
    </div>

    <div><button onclick="playButton()">Enter the dungeon</button></div>
</div>

<div id = "gameBoard">
    <div id ="enemy">Box</div>
    <div id ="enemy">Box</div>
    <div id ="enemy">Box</div>
    <div id ="break">Empty Row</div>
    <div id ="player">Player
        <a href="#"><img src="Enemies/JinWoo.png" alt="Jin_Woo"></a>
    </div>
    <div id ="break">Another empty Box</div>
    <div id ="enemy">Stats</div>
</div>

以及 JS：

window.onload = function(){
preloadImg();

$("#mainMenu").show();
$("#gameBoard").hide();
}

function playButton(){
$("#mainMenu").hide();
$("#gameBoard").show();

startGame();
}

标签： javascripthtmljquery

解决方案

按照标准，您应该将脚本放在</body>标记之前的末尾，并确保它们以正确的顺序放置。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" type="text/css" href="soloLeveling.css">

<title>Solo Leveling Game</title>
</head>
<body>

<div id="mainMenu">
    <div id="backstory">
        <h1><U>Backstory</U></h1>
        <p>A very simple game which follows the story line of Solo Leveling by Chu-Gong in which a player will be able to progress through various levels and dungeons to become the strongest!</p>
    </div>

    <div id="howToPlay">
        <h2>How to Play</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id illum et blanditiis commodi. Placeat eaque temporibus dolorem illo, officiis reprehenderit, neque fuga sint doloremque voluptate facere ut labore dolorum explicabo.</p>
    </div>

    <div><button onclick="playButton()">Enter the dungeon</button></div>
</div>

<div id = "gameBoard">
    <div id ="enemy">Box</div>
    <div id ="enemy">Box</div>
    <div id ="enemy">Box</div>
    <div id ="break">Empty Row</div>
    <div id ="player">Player
        <a href="#"><img src="Enemies/JinWoo.png" alt="Jin_Woo"></a>
    </div>
    <div id ="break">Another empty Box</div>
    <div id ="enemy">Stats</div>
</div>

<script src="jquery-3.6.0.js"></script> <!-- jquery goes first so references are not undefined -->
<script src="GameManager.js"></script>
</body>

而不是使用window.onload, 并且由于您使用的是 jQuery，您应该这样初始化您的脚本

$(document).ready(function () {
  function preloadImg() {
    // move your function's code here
  }
  preloadImg();

  $("#mainMenu").show();
  $("#gameBoard").hide();

  function playButton(){
    $("#mainMenu").hide();
    $("#gameBoard").show();

    startGame();
  }

  $("#howToPlay button").on('click', playButton); // took the liberty to add the event listener to your start button
});

推荐阅读