Проблема с привязкой события нажатия к кнопке с помощью внешнего файла JavaScript - PullRequest
Новая
       5

Проблема с привязкой события нажатия к кнопке с помощью внешнего файла JavaScript

1 голос
/ 16 июня 2020

Я пытаюсь прикрепить событие click или onlclick к элементу кнопки через внешний JavaScript, но это не работает. Кто-нибудь может помочь? Я пишу свой код ниже для справки. Html часть: - 

<head>
<script src="script.js"></script>
</head>
<body>
    <button id="myBtn">ClickMe</button>
    <p id="demo"></p>    
</body>

JS код: - 

document.getElementById("myBtn").addEventListener("click", myFunction);

function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World";
}

Ответы [ 2 ]

1 голос
/ 16 июня 2020

Вам нужно дождаться загрузки элементов DOM.

Скрипт по умолчанию после тегов html. Решение 1: 

<head>
</head>
<body>
  <button id="myBtn">ClickMe</button>
  <p id="demo"></p>    
  <!--Put script tag in end of body-->
  <script src="script.js"></script>
</body>

Другое решение использует функцию onload. При вызове onload DOM загружается и готов к доступу. Решение 2: 

// SCRIPT
window.onload = function() {

 function myFunction() {
   document.getElementById("demo").innerHTML = "Hello World";
 }

 document.getElementById("myBtn").addEventListener("click", myFunction);

};

<script src="script.js"></script>

</head>
<body>
  <button id="myBtn">ClickMe</button>
  <p id="demo"></p>    
</body>

Попробуйте: 

function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World";
}

window.onload = function() {
  document.getElementById("myBtn").addEventListener("click", myFunction);
}
 
 <button id="myBtn">ClickMe</button>
 <p id="demo"></p>
0 голосов
/ 16 июня 2020

Добавьте тег скрипта после HTML Это обязательно решит вашу проблему 

document.getElementById("myBtn").addEventListener("click", myFunction);

function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World";
}
<html>
<head>
</head>
<body>
    <button id="myBtn">ClickMe</button>
    <p id="demo"></p>    
    
    <script src="script.js"></script>    
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...