属性单击空值


嗨,我

收到错误"未捕获的类型错误:无法设置空的属性'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,还是只有一个。

最新更新