嗨,我
收到错误"未捕获的类型错误:无法设置空的属性'onclick'"我尝试过
- 将"window.onload"包装在我的代码周围
- 在页面顶部和底部移动 HTML 中的脚本链接
我在网上没有找到任何其他解决方案,
这是我的网页
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,700,600' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body>
<div class="Contact">
Contact
<a class="a3">
<i class="fa fa-chevron-up"></i>
</a>
</div>
<script src = "Script.js"></script>
</body>
</html>
这是我的 JS
var arrowThree = document.getElementById("a3");
arrowThree.onclick = function(){
alert("You clicked on Contact");
};
当然,我的JS和css文件还有更多内容,但对问题并不重要
当没有具有该 id 的元素时,您正在使用getElementById
。为此,您需要向元素添加一个 id:
<a id="a3" class="a3">
或者,按类名获取:
var arrowThree = document.getElementsByClassName("a3")[0];
但是,按类名获取将返回一个数组 - 对此要保持警惕。在我的示例中,我得到了第一个包含您要查找的类的元素,但这可能并不总是正确的。
如果页面上有多个具有该类的元素,则无法保证您拥有正确的元素。如果要向所有这些元素添加onClick
,则此方法更适合,如下所示:
var arrowThrees = document.getElementByClassName("a3");
var clickHandler = function(){
alert("You clicked on Contact");
}
for (var i=0; i<arrowThrees.length; i++) {
arrowThrees[i].onclick = clickHandler;
}
选择哪种方法取决于您是希望所有这些元素都具有 onClick,还是只有一个。