Question

嗨我得到错误“Uncaught TypeError：无法设置属性'onclick'of null”我试过

围绕我的代码
在页面顶部和底部的html中移动脚本链接

我还没有在网上找到任何其他解决方案，

这是我的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文件还有更多内容，但它对问题

并不重要

Answer 1

当没有带有该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，还是只有一个。

属性onclick为null

1 个答案: