Question

我试图通过不同的方法添加两个事件处理程序，一个使用document.getElementById，另一个使用内联css。我遇到的问题是只有对JS函数的内联调用才有效。在线查看各种示例后，我找不到任何问题。提前致谢。

Html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Dynamic Button</title>
</head>
<body>
    <script type="text/javascript" src="button.js"></script>
    <button type="button" id="AButton" onmouseover="DisplayAlert2();">Button</button>
</body>
</html>

的JavaScript

function DisplayAlert1(){
    window.alert("Alert 1");
}

function DisplayAlert2(){
    window.alert("Alert 2");
}

var AButtonJS = document.getElementById("AButton");
AButtonJS.onclick = DisplayAlert1;

Answer 1

您的问题是在DOM中存在按钮元素之前加载并且（几乎可以肯定）执行脚本元素。交换他们的立场，它应该工作正常：

<button type="button" id="AButton" onmouseover="DisplayAlert2();">Button</button>
<script src="button.js"></script>

修改DOM的脚本应该在load事件或DOM就绪之后调用，或者只是放在关闭body标记之前，以便在DOM加载后执行它们。

顺便提一下，只有当脚本不是javascript时，才需要脚本elemetns的类型属性。此外，按照惯例，以大写字母开头的函数名称保留给构造函数，因此调用函数 displayAlert1 和 displayAlert2 。

JavaScript事件处理程序不起作用

1 个答案: