函数不会从 innerHTML 中找到元素答案

【问题标题】：Function wont find element from innerHTML函数不会从 innerHTML 中找到元素
【发布时间】：2020-10-28 22:19:22
【问题描述】：

我在学校做一个项目，我们正在做一个网站，模块化非常重要。因此，我将标题放在 innerHTML 中，因为它将在每个页面上使用。我有一个使用该innerHTML 中的元素的计数器，但是当我调用该计数器时，它只是说“无法将innerHTML 的属性设置为null。我已经搜索了几个小时，但似乎没有其他人遇到过这个确切的问题.

在我将 html 放入 innerHTML 之前，计数器工作得很好。我尝试将脚本放在innerHTML 的标题下方、底部和正文结束标记下方。结果都一样。

这是 html 和 javascript 的代码。我只接受了用于此的行。

loadTop();
function loadTop() {
   document.getElementById("header").innerHTML = 
   '<div class="topbar">'+
       '<div class="cart">'+
           '<output type="number" id="orderCount">0</output>'
       '</div>'+
   '</div>';

  
}
       
window.onload = loadTop;
       
const cartNow = document.getElementById("orderCount");
let cartNum = 0;
 function cartCounter() {
    cartNum += 1;
    cartNow.innerHTML = cartNum;
    cartNow.style.opacity = 1;
    console.log(cartNow);
 }

<body>
        <header id="header"></header>
        <script src="script.js"></script>
        <button id="oatmeal" onclick="cartCounter()"> + </button>
</body>

【问题讨论】：

标签： javascript html properties null innerhtml

【解决方案1】：

请确保在分配 cartNow 之前已调用 loadTop()。否则 cartNow 将为空。

const cartNow = document.getElementById("orderCount")

编辑：我认为你不应该使用 onload 来加载你的页面，因为 onload 被认为是在页面“加载”之后调用。相反，我建议您在关闭您的身体之前调用您的 loadTop。然后使用 onload 事件来注册您的事件。我不是前端优化专家，所以也许有更优雅/高性能的解决方案，但无论如何它应该足以满足您的学校项目。

document.addEventListener("DOMContentLoaded", () => {
    const cartNow = document.getElementById("orderCount");
    let cartNum = 0;
    document.getElementById('oatmeal').addEventListener('click',  function cartCounter() {
        cartNum += 1;
        cartNow.innerHTML = cartNum;
        cartNow.style.opacity = 1;
        console.log(cartNow);
     });
});

<body>
    <header id="header"></header>
    <script src="script.js"></script>
    <button id="oatmeal"> + </button>
    <script>
        (function() {
           document.getElementById("header").innerHTML = 
           '<div class="topbar">'+
               '<div class="cart">'+
                   '<output type="number" id="orderCount">0</output>'
               '</div>'+
           '</div>'
        })();
    </script>
</body>

【讨论】：

所以我没有包括她的是我通过 window.onload = loadTop; 调用的 loadTop。 loadTop 在它自己的脚本文件中，而 cartCounter 在另一个中，这是因为我小组中的某个人决定了。但是当它们在同一个脚本文件中时也会发生同样的错误。我确保在使用 cartCounter 和 cartNow 的脚本之前调用带有 loadTop 的脚本..
好吧，cartNow 会在 window.onload 事件之前被调用。
哦，我明白了，对不起，我误解了！我现在开始工作了！但现在有新的错误..

【解决方案2】：

您必须在 .js 文件的开头调用 JavaScript 函数，如下所示：

loadTop();

function loadTop() {
    document.getElementById("header").innerHTML =
        '<div class="topbar">' +
        '<div id="overskrift"><a href="index.html">ELEMENT</a></div>' +

        '<!--STJERNE-->' +
        '<div class="cart">' +
        '<output type="number" id="orderCount">0</output>'
}

const cartNow = document.getElementById("orderCount");
let cartNum = 0;
function cartCounter() {
    cartNum += 1;
    cartNow.innerHTML = cartNum;
    cartNow.style.opacity = 1;
    console.log(cartNow);
}

【讨论】：

天哪，它成功了！太感谢了！柜台工作。如果您不介意，这里还有一个问题：当我这样做时，我在 loadTop 函数中遇到了另一个错误，该错误位于页脚的普通 innerHTML 行上。及其相同的错误消息..现在页脚中的文本消失了，因为 innerHTML 那里是空的。
您可以编辑此问题并使用完整代码对其进行更新，以便能够解决它向您显示的错误。

【解决方案3】：

现在一切都解决了。非常感谢你们。我以为我必须使用 window.onload 出于某种原因我在网上找到了某个地方，但我删除了它，并将 loadTop() 放在顶部，一切都已修复！最后，晚安！

【讨论】：