函数不会从innerHTML中找到元素

debugcn 发表于 Dev

鲁巴恩

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

在将html放入innerHTML之前，计数器一直工作正常。我也尝试将脚本放在innerHTML所针对的标头下，AND底部和主体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>

费尔南多·瓦尔德拉玛·瓜亚恩

您必须在.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);
}