addEventListener метод не работает должным образом - PullRequest
Новая
       151

addEventListener метод не работает должным образом

1 голос
/ 05 августа 2020

Я создаю простое приложение счетчика, а в Javascript addEventListern не работает, давая эту ошибку:

image 

//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>

Ответы [ 2 ]

1 голос
/ 05 августа 2020 
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>
0 голосов
/ 05 августа 2020

У вас опечатка. Входной элемент имеет идентификатор в верхнем регистре (увеличение), и вы пытаетесь получить к нему доступ, используя имя в нижнем регистре (увеличение).

...