Javascript - EventListener 在外部 js 文件中不起作用

Question

I am trying to remove the onClick tags in my html and add an EventListener to my external js-file instead, but can't seem to get it to work.我试图删除我的 html 中的 onClick 标记，并将一个 EventListener 添加到我的外部 js 文件中，但似乎无法让它工作。

The following lines work:以下几行工作：

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

When removing onclick and adding the following to my javascript, it does not :删除 onclick 并将以下内容添加到我的 javascript 时，它不会：

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

function skriv() {

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

}

Entire html:整个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>

Answer 1

you are missing window.onload, checkout demo with separate script.js file您缺少 window.onload，使用单独的 script.js 文件结帐演示

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);
  }
}

Answer 2

Place your <script> tag right before your closing </body> tag.将<script>标签放在结束</body>标签之前。
Or use another way to detect your DOM is ready.或者使用另一种方式来检测您的 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>

Answer 3

It does not work because when the script is loaded, there are no elements to be found on which it can bind the event.它不起作用，因为在加载脚本时，找不到可以绑定事件的元素。

Solutions.解决方案。

Move your script to the bottom of the body tag.将您的脚本移动到 body 标签的底部。

or you can Use Delegate或者你可以使用委托

 document.addEventListener("click", function(e) { for (var target=e.target; target && target!=this; target=target.parentNode) { // loop parent nodes from the target to the delegation node if (target.matches(<selector>)) { handler.call(target, e); break; } } }, false);

Answer 4

I would propose just to add the following right before the closing tag:我建议只在结束标记之前添加以下内容：

<script> window.onload=startListen(); </script>

On the first line of your .js-file, you add function startListen(){ * }在 .js 文件的第一行，添加function startListen(){ * }

You replace the * with all your eventListeners you want.您将 * 替换为您想要的所有事件监听器。

Javascript - EventListener 在外部 js 文件中不起作用

问题描述

4 个解决方案

解决方案1
9 2017-02-20 10:32:20

解决方案2
2 2017-02-20 10:19:54

解决方案3
0 2017-02-20 10:23:27

解决方案4
0 2020-04-19 20:42:50

Javascript - EventListener 在外部 js 文件中不起作用

问题描述

4 个解决方案

解决方案1 9 2017-02-20 10:32:20

解决方案2 2 2017-02-20 10:19:54

解决方案3 0 2017-02-20 10:23:27

解决方案4 0 2020-04-19 20:42:50

解决方案1
9 2017-02-20 10:32:20

解决方案2
2 2017-02-20 10:19:54

解决方案3
0 2017-02-20 10:23:27

解决方案4
0 2020-04-19 20:42:50