Javascript - EventListener не работает во внешнем js-файле

Я пытаюсь удалить теги onClick в своем html и вместо этого добавить EventListener в свой внешний js-файл, но не могу заставить его работать.Javascript - EventListener не работает во внешнем js-файле

Следующие строки работают:

<input type="text" name="text" id="test"> 
<input type="submit" name="send" value="Skicka" id="klick" onclick="skriv()">

При удалении OnClick и добавив следующую строку в мой JavaScript, это не делает:

document.getElementById("klick").addEventListener("click", skriv); 

function skriv() { 

    var input = document.getElementById("test").value; 
    alert("Hello" + " " + input); 

}

Весь HTML:

<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="hello.css"> 
    <title> 
     Multimedia 
    </title> 
    </head> 
    <body> 
     <script type="text/javascript" src="hello.js"></script> 
     <div> 
      <form> 
       <p>Skriv ditt namn:</p><br> 
       <input type="text" name="text" id="test"> 
       <input type="submit" name="send" value="Skicka" id="klick"> 
      </form> 
      <p class="lol"> 
       "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do"`enter code here` 
      </p> 
     </div> 
    </body> 
</html>

источник

2017-02-20 bovvan

Наведите <script> бирка перед тем, как закрыть </body> бирка.
Или используйте другой способ для обнаружения вашего DOM.

<body> 
 

 

 
    <div> 
 
    <form> 
 
     <p>Skriv ditt namn:</p><br> 
 
     <input type="text" name="text" id="test"> 
 
     <input type="submit" name="send" value="Skicka" id="klick"> 
 
    </form> 
 
    <p class="lol"> 
 
     "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do"`enter code here` 
 
    </p> 
 
    </div> 
 

 

 

 
    <script> // Or external JS URL 
 
    document.getElementById("klick").addEventListener("click", skriv); 
 

 
    function skriv() { 
 

 
     var input = document.getElementById("test").value; 
 
     alert("Hello" + " " + input); 
 

 
    } 
 
    </script> 
 

 
</body>

источник

2017-02-20 10:19:54

Это не работает, потому что, когда скрипт загружен, нет никаких элементов, которые будут найдены, на которых он может связывать событие.

Решения.

Переместите свой сценарий в нижней части тега тела.
или вы можете использовать делегат

document.addEventListener для (целей вара = e.target ("щелчком", функции (е) { ; цель & & цели = это;! Цель = target.parentNode) { // петлевые родительские узлы от цели до узла делегирования , если (target.matches()) { handler.call (цель, е); перерыва; }} }, ложь);

источник

2017-02-20 10:23:27

вам не хватает window.onload, фотографии demo with separate script.js file

window.onload = function() { 
    var buttonElement = document.getElementById("klick"); 
    var inputElement = document.getElementById('test'); 


    if (buttonElement) { 
    buttonElement.addEventListener('click', skriv); 
    } 

    function skriv() { 
    var input = inputElement.value; 
    alert("Hello " + input); 
    } 
}

источник

2017-02-20 10:32:20

Да, это работает! Спасибо, Вилас! Хорошее решение. Я использовал его в php-форме для вызова внешнего js-файла. Слушатели событий не будут работать, пока я не сделаю это. – sparkle

Javascript - EventListener не работает во внешнем js-файле

ответ

Смежные вопросы