Question

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

2021-12-16

724

javascript html

我尝试为我的第一个网站制作简单的单词搜索生成器。但错误发生。

select.js

let width_textbox = document.querySelector("#width");
let height_textbox = document.querySelector("#height");
let width = null;
let height = null;

const makebutton = document.getElementById("make-button");
const activeclass = "active";

function handleClickMakeBtn() {

    width = parseInt(width_textbox.value);
    height = parseInt(height_textbox.value);
    if (width > 30 || height > 30) {
        alert("Width and height cannot longer than 30!");
        width_textbox.value = "";
        height_textbox.value = "";

        } else if (width < 5 || height < 5) {
        alert("Width and height cannot shorter than 5!");
        width_textbox.value = "";
        height_textbox.value = "";

    } else if (isNaN(width) || isNaN(height)) {
        alert("Width and height must be number!");
        width_textbox.value = "";
        height_textbox.value = "";

    } else if (width == null || height == null) {
        alert("You have to enter width and height!");
    } 

    else {
        window.location.href = "/html/make.html";
    }
}

function handleMakeBtnMouseEnter() {
    makebutton.classList.add(activeclass);
}

function handleMakeBtnMouseLeave() {
    makebutton.classList.remove(activeclass);
}

export { width, height };

makebutton.addEventListener("mouseenter", handleMakeBtnMouseEnter);
makebutton.addEventListener("mouseleave", handleMakeBtnMouseLeave);
makebutton.addEventListener("click", handleClickMakeBtn);

make.js

import * as settings from "./select.js";

console.log(settings.width);

select.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Making Basic template</title>
</head>
<body>
    <h1>
        Basic template:
    </h1>
    <div class="settings">
        <h5>
            <p>
                width: <input type="text" class="inputs" id="width">
            </p>
            <p>
                height: <input type="text" class="inputs" id="height">
            </p>
        </h5>
    </div>
    <button id= "make-button">Make</button>
    <script type="module" src="/javascript/select.js"></script>
    <link rel="stylesheet" href="/css/select.css">
</body>
</html>

make.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Make word search</title>
    <script defer type="module" src="/javascript/make.js"></script>
</head>
<body>
    <h1>Make word search</h1>
</body>
</html>

fdsjaiof;jewiofj;eowijfaio;wejfoiwejfoi;ejwfiojwe;oifjewoiajfiojewaio;jfeiowajiofjeowajfoiejwioafjoweijfioewajfnwefnweoainvejwafje;owjafoiwewoafijeoiwjafeijwaiofje;wajfe;iwafjew;iafje;wijfaiojewaoifjeowijafioejwa;oifjeowiajfioejwaiofjewoia

Answer 1

添加事件监听器前检查 makebutton 是否不为空。

if(makebutton)
{
makebutton.addEventListener("mouseenter", handleMakeBtnMouseEnter);
makebutton.addEventListener("mouseleave", handleMakeBtnMouseLeave);
makebutton.addEventListener("click", handleClickMakeBtn);
}

Answer 2

您需要推迟加载 select.js ，就像在脚本标记中加载 make.js 一样

<script type="module" src="/javascript/select.js" defer></script>

您在 DOM 加载之前加载并运行 select.js，因此您的 document.getElementById("make-button"); 返回 null，因为无法找到它