Javascript 函数只调用了一半时间

Question

我在 Whosebug 上看到过一些类似的问题，但我似乎找不到符合我的问题。

我是编程新手，但我已经做了很多东西。我目前正在努力将所有这些合并到一个站点中。为此，我制作了一个包含导航面板的 header。我有 6 个不同的 html 页面，我一直在为 header 重复相同的信息，所以我认为使用 JS 插入 header 可能会更好。在那种情况下，我只需要定义一次 header 并且在所有 html 页面上都相同。 HTML 页的开头如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Main page</title>
    <meta charset="utf-8" />
    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="./index css/index style.css" />
    <script type="text/javascript" src="./index js/index js.js"></script>
</head>

<body>
    <header id="navPanel">
    </header>
<main>
... page content ...
</main>
</body>

有些页面多了一个脚本，但是没有其他针对id="navPanel"的脚本。创建导航面板的 JS 位于 index js.js。下面的代码是生成导航面板的JS：

window.onload = function setupNav() {
    let navPanel = document.getElementById('navPanel');
    console.log(navPanel);
    document.getElementById('navPanel').innerHTML = '<nav> \
    <ul class="navigation navLinks" id="navBar"> \
        <div class="navTabletFlex"> \
        <img class="logo" src="./images/Logo.png" alt="Logo" /> \
            <li><a href="./index.html">Home</a></li> \
            <li><a href="./construction.html">To Do List</a></li> \
            <li> \
                <div class="dropdownNav" id="dropdownNav"> \
                    <button class="dropbtn" id="dropBtn">Games</button> \
                    <div class="dropdown-content"> \
                        <ul class="navLinksDropdown"> \
                            <li><a href="./rps.html">Rock Paper Scissors</a></li> \
                            <li><a href="./rpsls.html">Rock Paper \
                                    Scissors Lizard Spock</a></li> \
                            <li><a href="./numguess.html">Random Number Guesser</a></li> \
                            <li><a href="./puzzle.html">Puzzle Game</a></li> \
                        </ul> \
                    </div> \
                </div> \
            </li> \
            <li><a href="./construction.html">About me</a></li> \
            <li><a href="./construction.html">Contact</a></li> \
        </div> \
    </ul> \
    <button class="navBarIcon" onclick="toggleNav()"> \
                <i class="fa fa-bars"></i> \
    </button> \
</nav>';
    hightlightCurrentPage();
};

奇怪的是，在index.html、construction.html和numguess.html上，header正常工作，而在rps.html、[=59=上]，而 puzzle.html 没有。 header 存在，当我尝试在控制台中使用 document.getElementById('navPanel') 定位它时，我可以使用 .innerHTML 添加内容。

我试图将 <script type="text/javascript" src="./index js/index js.js"></script> 放在 </body> 标签之前，但没有成功。我找不到工作页面和 non-working 页面之间的任何差异。所以我希望你们中的一些人对我可以寻找的东西有一些想法。

编辑：下面是其他 HTML 页。 puzzle.html（不工作）

<head>
    <title>Puzzle game</title>
    <meta charset="utf-8" />
    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />
    <script type="text/javascript" src="./index js/index js.js"></script>
    <script type="module" src="./Puzzle app/js/Cell.js"></script>
    <script type="module" src="./Puzzle app/js/Puzzle app js.js"></script>
    <script type="module" src="./Puzzle app/js/PicturePuzzle.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="./index css/index style.css" />
</head>

<body>
    <header id="navPanel">
    </header>
... rest of page...

rpsls.html（不工作）

<head>
    <title>Rock paper scissors lizard spock App</title>
    <meta charset="utf-8" />
    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />
    <script type="text/javascript" src="./Rock paper scissors lizard spock app/js/Rock paper scissors lizard spock app js.js"></script>
    <script type="text/javascript" src="./index js/index js.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="./index css/index style.css" />
</head>

<body onload="getComputerPlays()">
    <header id="navPanel">
    </header>
...rest of page

rps.html（不工作）

<head>
    <title>Rock paper scissors App</title>
    <meta charset="utf-8" />
    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />
    <script type="text/javascript" src="./Rock paper scissors app/js/Rock paper scissors app js.js"></script>
    <script type="text/javascript" src="./index js/index js.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="./index css/index style.css" />
</head>

<body onload="getComputerPlays()">
    <header id="navPanel">
    </header>
...rest of page

construction.html（工作）

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="./index css/index style.css">
    <script text="text/javascript" src="./index js/index js.js"></script>

    <title>Under Construction</title>
</head>

<body class="construction">
    <header id="navPanel">
    </header>
...rest of page

numguess.html（工作）

<head>
    <title>Random Number Guessing Game</title>
    <meta charset="utf-8" />
    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />
    <script src="./Random Number Guesser/js/Random Number Guesser Script.js"></script>
    <script type="text/javascript" src="./index js/index js.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="./index css/index style.css" />
</head>

<body>
    <header id="navPanel">
    </header>
...rest of page

Answer 1

在你的 js 文件中，将它们的内容放在一个函数调用中，该函数调用会监听正确的时刻以正确地 spring 采取行动：

window.addEventListener('load', (event) => {
  console.log('page is fully loaded');
  // somewhere here goes your content
});

这是怎么回事，浏览器开始从上到下解析它看到的数据，并尽快开始处理它。但是通过将你编写的 JS 放在该函数中，你告诉浏览器 "hey call this once you're done reading and loading the page".

来源：

https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event

Javascript 函数只调用了一半时间

Javascript function called only half of the time

html

javascript

function

onload