函数不会从innerHTML中找到元素

如何解决函数不会从innerHTML中找到元素

我正在学校里做一个项目，我们正在制作一个网站，而模块化非常重要。因此，我将标题放在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>

解决方法

在分配cartNow之前，请确保已调用loadTop()。 else 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>

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

现在一切正常。非常感谢你们。我以为出于某种原因不得不在我的网站上使用window.onload，但是我删除了它，只将loadTop（）放在顶部，这一切都已修复！终于，晚安！

函数不会从innerHTML中找到元素

如何解决函数不会从innerHTML中找到元素

解决方法

相关推荐