Question

我该如何修复：“未捕获的类型错误：无法读取 null 的属性（读取‘addEventListener’）”？

2022-04-07

1062

javascript html

我尝试了一些解决方案来修复此错误，例如将 <script> 放在 </body> 下方，但没有奏效。那么我该如何修复它呢？这是我的代码。我想知道我的错误是什么，这样当我再次遇到此错误时我可以修复它。先谢谢了

<body>
        <div id="main">
            <div id="login">
                <h2><strong>Login</strong></h2>
                <br>
                <form id="info" ac>
                    <label>Username:</label>
                    <input type="text" placeholder="Input username" name="username" id="first">
                    <label>Password:</label>
                    <input type="password" placeholder="Input password" name="password" id="seconde">
                    <div>
                        <button id="bt">Login</button>
                    </div>
                </form>
            </div>
        </div> 
        <script>
document.querySelector("bt").addEventListener("click",function(check){
    var a = document.querySelector("#first").value;
    var b = document.querySelector("#second").value;
    if(a=="admin" && b=="123456"){
        alert('Login Success!\nRedirecting to next page');
        document.querySelector("#info").action="nextpage1.html"
    }else{
        alert('Login failed!\nIncorrect username or password');
    }
})
        </script>
 </body>

Answer 1

显示此错误是因为您必须指定您正在选择什么（类/id）
在您的代码中，您忘记在 id 名称前添加 #

document.querySelector("#bt")

您也可以使用

document.getElementById("bt")

Answer 2

正如 Phil 上面所建议的， document.querySelector 将查找您在其中提到的任何内容。

由于您有 bt ，它将查找标签 <bt> 。

因此，如果您想选择一个 id bt ，请确保在实际 id 的名称前使用 # 。

或者如果您想选择一个类，请不要忘记在实际类名之前使用 . 。

示例：

使用 ID 选择 - document.querySelector("#bt")
使用 ClassName 选择 - document.querySelector(".bt")

Answer 3

使用此代码：更新 1：在输入中，将 id 从 seconde 更改为 second 更新 2：在 document.querySelector 中，添加 # with bt。

<body>
        <div id="main">
            <div id="login">
                <h2><strong>Login</strong></h2>
                <br>
                <form id="info" ac>
                    <label>Username:</label>
                    <input type="text" placeholder="Input username" name="username" id="first">
                    <label>Password:</label>
                    <input type="password" placeholder="Input password" name="password" id="second">
                    <div>
                        <button id="bt">Login</button>
                    </div>
                </form>
            </div>
        </div> 
        <script>
document.querySelector("#bt").addEventListener("click",function(check){
    var a = document.querySelector("#first").value;
    var b = document.querySelector("#second").value;
    if(a=="admin" && b=="123456"){
        alert('Login Success!\nRedirecting to next page');
        document.querySelector("#info").action="nextpage1.html"
    }else{
        alert('Login failed!\nIncorrect username or password');
    }
})
        </script>
 </body>