函数不会从 innerHTML 中找到元素

Question

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

在我将 html 放入 innerHTML 之前，计数器工作正常。我也尝试将脚本放在 innerHTML 所在的 header 下方，以及底部和 body end-tag 下方。结果都一样。

这是 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>

Answer 1

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

const cartNow = document.getElementById("orderCount")

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

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>

Answer 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);
}

Answer 3

现在一切顺利。非常感谢你们俩。我以为出于某种原因我必须使用 window.onload 我在网上找到了一些东西，但我删除了它，只把 loadTop() 放在顶部，一切都已修复！最后，晚安！

函数不会从 innerHTML 中找到元素

Function wont find element from innerHTML

html

javascript

null

properties

innerhtml