Блог

Главная - Вопросы по программированию - событие onclick html не запускается

событие onclick html не запускается

#javascript #html #dom

#javascript #HTML #dom

Вопрос:

Я предполагаю, что мне не хватает некоторых основ html, javascript, DOM и распространения или чего-то подобного, но я не могу найти ни одного соответствующего вопроса / ответа.

Вот мой код :

 <html>

<head>
  <script type="text/javascript">
    function click(e) {
      alert(e.target.id);
    }
  </script>
</head>

<body>
  <input type="button" id="btn1" onclick="alert(event.target.id);" value="MyButton1">
  <input type="button" id="btn2" onclick="click(event);" value="MyButton2">
</body>

</html>

MyButton1 работает нормально. MyButton2 не запускает событие onclick.

Вопрос прост: почему MyButton2 событие не запускается?

Ответ №1:

Поскольку в элементе DOM, соответствующем элементу button, есть метод click, назовите свою функцию как угодно, кроме click :

 <html>  
<head>
    <script type="text/javascript">
        function clickMe(e) {
            alert(e.target.id);
        }
    </script>
</head>
<body>
     <input type="button" id="btn1" onclick="alert(event.target.id);" value="MyButton1">
     <input type="button" id="btn2" onclick="clickMe(event);" value="MyButton2">
</body>
</html>

Пожалуйста, обратите внимание: вам следует избегать использования встроенного обработчика событий, вместо этого вы можете использовать addEventListener() :

 <html>  
<head>
    <script type="text/javascript">
      window.addEventListener('DOMContentLoaded', () => {
        document.getElementById('btn1').addEventListener('click', alertMessage);
        document.getElementById('btn2').addEventListener('click', alertMessage);
      });
      
      function alertMessage(e){
        alert(e.target.id);
      }
    </script>
</head>
<body>
     <input type="button" id="btn1" value="MyButton1">
     <input type="button" id="btn2" value="MyButton2">
</body>
</html>

Комментарии:

1. Спасибо 🙂 Есть ли какая-либо спецификация, показывающая, что click это своего рода зарезервированное имя функции?

2. @Tuckbros, поскольку в элементе DOM, соответствующем элементу button, есть метод click, вы не должны его использовать 🙂

3. то же самое происходит с search

Ответ №2:

Или вы могли бы сделать это! Сохраняя имя функции таким же!

На самом деле я бы предложил сделать это таким образом (установив эти атрибуты из скрипта)

 <html>

<head>

</head>

<body>
  <input type="button" id="btn1" onclick="alert(event.target.id);" value="MyButton1">
  <input type="button" id="btn2" value="MyButton2">

  <script type="text/javascript">
    function click(e) {
      alert(e.target.id);
    }
    
    document.getElementById("btn2").onclick = click;
  </script>

</body>

</html>

Метки: