Question

<script>
var el = document.getElementById('btn');
e1.onclick=function()
{
//
    alert('hello');
};
  </script>
  <button type="button" id="btn" >Log-in</button>

我只是通过一个简单的按钮onclick（）事件来测试不显眼的javaScript是如何工作的，但是当我点击Log-in按钮时，没有出现警报框没有出现

Answer 1

您的脚本显示在按钮之前。

在按钮添加到DOM之前运行。

document.getElementById('btn')找不到该按钮，因为该按钮不存在。

在按钮之后移动脚本或将其放入函数中并在按钮存在后调用该函数（例如，从窗口的加载事件中调用）。

此外，请勿在代码中间重命名变量。小写字母L和数字1不可互换。

Answer 2

问题是您尝试在元素存在之前附加处理程序。 <script>标记会立即执行，因此浏览器当时没有创建按钮元素。

解决方案是将其包装在window.onload：

中

window.onload = function(){
    var el = document.getElementById('btn');
    e1.onclick=function()
    {
    //
        alert('hello');
    };
};

或者，您可以使用DOMContentLoaded事件。这与onload不同，因为它不会等待加载图像和CSS。它不受IE8或更低版本的支持：

document.addEventListener("DOMContentLoaded", function(event) {
    console.log("ready to attach events");
});

Answer 3

是的，如上面2所说，你可以将你的代码包装在window.onload中，你可以编写一个函数并调用它的onclick事件按钮，如下所示

function myfunction() {
  alert('Hello');
  };

<input type="button" onclick="myfunction()" value="Click Me!" />

http://jsfiddle.net/wf8yJ/13/

一个简单的Unobtrusive JavaScript示例

3 个答案: