addEventListener 方法无法正常工作

Question

我正在构建简单的计数器应用程序，但在 Javascript addEventListern 中无法正常工作出现此错误：

这是我的 JavaScript 代码，我试过但它仍然给出

的错误

Cannot read property 'addEventLister' of Null

//selecting elements
let value = document.getElementById('value');
let counter = 0;
value.textContent = counter;
// addingEventListener
document.getElementById('reset').addEventListener('click', reset);
document.getElementById('increase').addEventListener('click', increase);
document.getElementById('decrease').addEventListener('click', decrease);
// Event functions

function reset() {
  counter = 0;
}

function increase() {
  counter++;
}

function decrease() {
  counter--;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="main">
    <div class="container">
      <p class="two-times">Counter</p>
      <p class="two-times" id="value">0</p>
      <div class="buttons">
        <input class="btn" id="decrease" type="button" value="Recrease">
        <input class="btn" id="reset" type="button" value="Reset">
        <input class="btn" id="Increase" type="button" value="Increase">
      </div>
    </div>
  </div>

  <!-- javaScript -->
  <script src="app.js"></script>
</body>

</html>

Answer 1

document.getElementById('increase').addEventListener('click', increase);

和

<input class="btn" id="Increase" type="button" value="Increase">

不匹配

//selecting elements
let value = document.getElementById('value');
let counter = 0;
value.textContent = counter;
// addingEventListener
document.getElementById('reset').addEventListener('click', reset);
document.getElementById('Increase').addEventListener('click', increase);
document.getElementById('decrease').addEventListener('click', decrease);
// Event functions

function reset() {
  counter = 0;
}

function increase() {
  counter++;
}

function decrease() {
  counter--;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="main">
    <div class="container">
      <p class="two-times">Counter</p>
      <p class="two-times" id="value">0</p>
      <div class="buttons">
        <input class="btn" id="decrease" type="button" value="Recrease">
        <input class="btn" id="reset" type="button" value="Reset">
        <input class="btn" id="Increase" type="button" value="Increase">
      </div>
    </div>
  </div>

  <!-- javaScript -->
  <script src="app.js"></script>
</body>

</html>

Answer 2

你打错了。输入元素的 ID 大写 (Increase)，而您正尝试使用小写名称 (increase) 访问它。

addEventListener 方法无法正常工作

addEventListener method is not working properly

javascript

addeventlistener

dom-events