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

标签 javascript inline event-listener

我正在尝试删除我的 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>

最佳答案

您缺少 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);
  }
}

关于Javascript - EventListener 在外部 js 文件中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42341761/

相关文章:

java - Android 应用程序中的旋转 vector 传感器不适用于我的 Moto G

javascript - 按属性对对象数组进行排序(多级)

c++ - 函数内联——有哪些损害性能的例子?

html - 获取两个内联(或内联 block )元素以匹配高度

c++ - 我如何搜索这个问题(范围内的宏与内联函数)

angular - 如何从 Angular 事件监听器访问全局变量

javascript - 以设定的间隔增加和减少 div 的宽度和高度

c# - 如何使用 JavaScript 为复选框事件使表的 "tr"可见?

javascript - 将属性设置为未定义时未通知观察者

javascript - 将 setValue 和 getValue 添加到 JQueryUI 自动完成