Прослушиватель событий срабатывает при нажатии на значок расширения, а не всплывающую кнопку

#javascript #html #google-chrome #browser-extension

#javascript #HTML #google-chrome #браузер-расширение

Вопрос:

Я разрабатываю расширение для браузера, в котором пользователь может нажать на одну из многих кнопок во всплывающем окне. Мой код хранится в popup.js. Следующий код должен выполняться только при нажатии кнопки с id =»green». Вместо этого он выполняется всякий раз, когда вы нажимаете значок расширения в первый раз.

 <!DOCTYPE html>
  

<html>
    <head>
      <style>
        button {
          height: 20px;
          width: 100px;
          outline: none;
        }
      </style>
      
    </head>
    <body>
      <button id="oolong">Oolong</button>
      <button id="green">Green</button>
      <button id="purerh">PurErh</button>
      <button id="Black">Black</button>
      <span id="audio"></span>
      <script src="popup.js"></script>
    </body>
  </html>

 document.getElementById("green").addEventListener("click", alert("Test"))

Что мне нужно сделать, чтобы он выполнялся только при нажатии кнопки с id = ‘green’?

1.Этот прослушиватель событий не должен ничего выполнять, alert возвращает undefined , и это то, что #green будет прослушиваться. Пожалуйста, добавьте больше контекста в код. Существует внешний прослушиватель событий, который пытается подключить нового прослушивателя, если этот код запускается при нажатии.

2. Готово, смотрите выше.

3. Пожалуйста, покажите больше кода вокруг строки JS, которую вы опубликовали.

4. Больше ничего нет.

5. Вы неправильно поняли, как addEventListener работает. Короче говоря, аргументом обработчика должна быть ссылка на функцию. Когда вы подключаете прослушиватель событий, вызывается addEventListener метод элемента. Эта встроенная функция добавляет событие во встроенную очередь событий, и функция, переданная в качестве аргумента, вызывается из этой очереди при срабатывании прослушиваемого события. Этот механизм часто называют » обратным вызовом «. В вашем коде alert вызывается немедленно, и его возвращаемое значение ( undefined ) передается в addEventListener , и прикрепление события завершается ошибкой. Ответ Дэвида правильный, просто следуйте ему.

Ответ №1:

 document.getElementById("green").addEventListener("click", function(){alert("Test")})

У вас есть переход к addEventListener функции для выполнения. То, что вы делаете, передает возврат выполнения

1. Это вызов: оповещение («Тест») Везде, где вы ставите это как обратный вызов, вы используете его возвращаемое значение. Чтобы использовать alert в качестве обратного вызова, вы не должны его вызывать (установите его без («Test»)), поэтому вы будете вызывать alert с объектом, который не является тем, что вы ищете