JavaScript нажмите addEventListener не работает над моим кодом

1

Я пытаюсь заставить слушателя JavaScript работать, но ничего не меняется.

Вот полный код:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
    #trigger {
      padding: 20px;
      background-color: red;
      border: 1px solid white;
      width: 100px;
      cursor: pointer;
    }

    #box {
      padding: 20px;
      background-color: green;
      border: 1px solid white;
      width: 100px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="trigger">Click Here</div>
  <div id="box">
    content should change
  </div>
  <script type="text/javascript">
    document.addEventListener("click", () => {
      document.getElementById("trigger"), () => {
        document.getElementById("box").innerHTML = "New Box Text";
      }
    });
  </script>
</body>
</html>

Я знаю, что могу сделать это с помощью jQuery, но я хочу сделать это с помощью чистого, ванильного JavaScript.

Когда я нажимаю #trigger, текст #box не меняется. Что я делаю неправильно?

  • 0
    вам нужно что-то вроде document.querySelector('#trigger').onclick , но я хочу document.querySelector('#trigger').onclick , что вы должны указать целевой элемент.
  • 0
    @BJAA Использование addEventListener - это лучшая практика, чем onclick
Теги:
addeventlistener
dom

2 ответа

2
Лучший ответ

Чтобы выполнить только ваш код, когда DOM полностью загружен и проанализирован, добавьте приемник DOMContentLoaded событие DOMContentLoaded, затем используйте querySelector для выбора элемента с идентификатором #trigger, затем добавьте к нему прослушиватель событий click и снова используйте querySelector для выбора элемента с #box id и изменения его .innerHTML соответственно:

document.addEventListener('DOMContentLoaded', () => {
  document.querySelector("#trigger").addEventListener('click', () => {
    document.querySelector("#box").innerHTML = "New Box Text";
  });
});

Самое замечательное в использовании querySelector, а также querySelectorAll заключается в том, что они обеспечивают аналогичную функциональность по сравнению с jQuery при выборе элементов.

Пример:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
    #trigger {
      padding: 20px;
      background-color: red;
      border: 1px solid white;
      width: 100px;
      cursor: pointer;
    }
    
    #box {
      padding: 20px;
      background-color: green;
      border: 1px solid white;
      width: 100px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="trigger">Click Here</div>
  <div id="box">
    content should change
  </div>
  <script type="text/javascript">
    document.addEventListener('DOMContentLoaded', () => {
      document.querySelector("#trigger").addEventListener('click', () => {
        document.querySelector("#box").innerHTML = "New Box Text";
      });
    });
  </script>
</body>
</html>
1

Добавьте слушателя в элемент box, а не всю страницу:

document.getElementById("trigger").addEventListener("click", () =>
  document.getElementById("box").innerHTML = "New Box Text"
);
<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title></title>

  <style type="text/css">
    #trigger {
        padding: 20px;
        background-color: red;
        border:1px solid white;
        width: 100px;
        cursor: pointer;
    }

    #box {
        padding: 20px;
        background-color: green;
        border:1px solid white;
        width: 100px;
        cursor: pointer;
    }
  </style>

</head>

<body>

<div id="trigger">Click Here</div>
<div id="box">
    content should change
</div>

</body>
</html>

Ещё вопросы

Сообщество Overcoder
Наверх
Меню