时间戳

首页 > 解决方案 > 不确定为什么会发生“未捕获的 TypeError：无法读取属性 'setAttribute' of null”以及如何修复

javascript - 不确定为什么会发生“未捕获的 TypeError：无法读取属性 'setAttribute' of null”以及如何修复

问题描述

单击按钮时，会产生错误“Uncaught TypeError: Cannot read property 'setAttribute' of null”。预期效果是更改链接的 href、innerHTML 和类。按下的按钮和链接位于不同的页面上。

不知道为什么会这样，我的 .js 文件的脚本标签位于我的正文标签的末尾，而且我的 id 似乎没有拼写/大小写问题。

想知道如何修复以及为什么它不能按预期工作。

HTML（带有要编辑的链接的页面）

<body>
<nav class="navbar navbar-expand-md navbar-orange navbar-dark"> <!--Custom colour for navbar bg-->
        <a class="navbar-brand" href="index.html">Icon</a>
        <button class="navbar-toggler" type="button"
                data-toggle="collapse" data-target="#navBar">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navBar">
            <ul class= "navbar-nav ml-auto">
                ...
                <li class="nav-item">
                    <a class="nav-link active" href="login.html" id="loginIcon">
                        <span class="fa fa-sign-in"></span> Login</a>
                </li>
            </ul>
        </div>
    </nav>
     ...
    <script src="login-script.js"></script>
</body>

HTML（带按钮的页面）

<body>
    <div class="text-center p-3">
        <a href="index.html" id="loginButton" onclick="loginClick()"
        class="btn btn-primary btn-lg col-auto button-white button-text-black" href="#" role="button">Login</a>
        
    </div>
    <div class="text-center p-3">
        <a href="sign-up.html" id="signUpButton"
        class="btn btn-primary btn-lg col-auto button-white button-text-black" href="#" role="button">Or Sign Up Here</a>
    </div> 
    <script src="login-script.js"></script> 
</body>

JS

function loginClick(){
    document.getElementById("loginIcon").setAttribute("href","account.html");
    document.getElementById("loginIcon").setAttribute("class","fa fa-user-plus");
    document.getElementById("loginIcon").innerHTML="Account";
};

标签： javascripthtmldombootstrap-4

解决方案

推荐阅读