Question

我收到上面提到的错误，不使用innerHTML 请帮助解决这个问题。在js 文件中出现错误。它只是我试图制作的一个基本计数器......

index.html

<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script type="text/javascript" src="script.js"></script>
  </head>
  <body>
    <div>
      <h1>Counter</h1>

      <h1 class="counter-display">(..)</h1>
      <button class="counter-minus">-</button>
      <button class="counter-plus">+</button>
    </div>
  </body>
</html>

Script.js

 let counterDisplayElem = document.querySelector('.counter-display');
    let counterMinusElem = document.querySelector('.counter-minus');
    let counterPlusElem = document.querySelector('.counter-plus');
    let count = 0;
    
    updateDisplay();
    
    counterPlusElem.addEventListener("click", () => {
        count++;
        updateDisplay();
    });
    
    counterMinusElem.addEventListener("click", () => {
        count--;
        updateDisplay();
    });
    
    function updateDisplay() {
        counterDisplayElem.innerHTML = count;
    };

Answer 1

将您的代码放在窗口的加载事件处理程序中，然后您的代码将在您的 DOM 加载完毕并且 document.querySelector('.counter-display'); 可以访问 h1 元素时运行。

试试这个：

<script>
    window.addEventListener('load', () => {
        let counterDisplayElem = document.querySelector('.counter-display');
        let counterMinusElem = document.querySelector('.counter-minus');
        let counterPlusElem = document.querySelector('.counter-plus');
        let count = 0;

        updateDisplay();

        counterPlusElem.addEventListener("click", () => {
            count++;
            updateDisplay();
        });

        counterMinusElem.addEventListener("click", () => {
            count--;
            updateDisplay();
        });

        function updateDisplay() {
            counterDisplayElem.innerHTML = count;
        };
    });
</script>

Answer 2

Javascript 无法找到元素，因为脚本在 DOM 加载之前运行。

您应该将您的代码放在一个函数中，并通过函数体 onload 运行它。

function loaded() {
  let counterDisplayElem = document.querySelector('.counter-display');
  let counterMinusElem = document.querySelector('.counter-minus');
  let counterPlusElem = document.querySelector('.counter-plus');
  let count = 0;

  updateDisplay();

  counterPlusElem.addEventListener("click", () => {
    count++;
    updateDisplay();
  });

  counterMinusElem.addEventListener("click", () => {
    count--;
    updateDisplay();
  });

  function updateDisplay() {
    counterDisplayElem.innerHTML = count;
  };
}

<body onload="loaded()">
  <div>
    <h1>Counter</h1>

    <h1 class="counter-display">(..)</h1>
    <button class="counter-minus">-</button>
    <button class="counter-plus">+</button>
  </div>
</body>

另一种选择是将脚本标签放在 <body> 的末尾，而不是放在 <head>

Answer 3

您的 querySelector 函数可能没有找到 HTML 元素，因为它们在创建元素之前正在运行。

为了在不使用 jQuery 的情况下防止出现这种情况，您应该用以下内容包围您的 JS 代码：

document.addEventListener("DOMContentLoaded", function(event) { 
  //do work
});

It's supported by 99 % of browsers.

未捕获的类型错误：无法设置 nulll 的属性“innerHTML”

3 个答案: