Question

我正在尝试删除html中的onClick标记，并将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>

Answer 1

你缺少window.onload，checkout 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);
  }
}

Answer 2

将<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>

Answer 3

它不起作用，因为加载脚本时，没有找到可以绑定事件的元素。

解。

将脚本移动到正文标记的底部。

或您可以使用代理

   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

我建议只在结束标记之前添加以下内容：

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

在.js文件的第一行，添加function startListen(){ * }

您将*替换为所需的所有eventListeners。

Javascript - EventListener无法在外部js文件中工作

4 个答案: