Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') how can I-CodePudding

I've tried to make simple word search maker for my first web. But error occured.

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 >
        <h5>
            <p>
                width: <input type="text"  id="width">
            </p>
            <p>
                height: <input type="text"  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;owjafoijewoafijeoiwjafeijwaiofje;wajfe;iwafjew;iafje;wijfaiojewaoifjeowijafioejwa;oifjeowiajfioejwaiofjewoia

CodePudding user response：

You need to defer loading of select.js like you do with make.js in your script tag

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

You are loading and running select.js before the DOM has loaded, so your document.getElementById("make-button"); returns null since it can't be found

CodePudding user response：

Check whether the makebutton is not null before adding an event listener.

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