Разбил файл html на 3, теперь js пишет ошибку

Question

проблема такая, у меня был файл index.html со всем кодом, потом я решил в основном файле(index.html) сделать ссылки на другие файлы которые в этом же проэкте. Я роскидал код по файлам и теперь пишет такую ошибку: script.js:65 Uncaught TypeError: Cannot read properties of null (reading 'addEventListener'). Что делать?

Псс.. Должно работать так, сначала на главной странице (index.html) 3 ссылки Сложение (+) Вычитание (-) Умножение () кликаешь на выбранную и тебя перебрасывает на страницу с задачей ,инпутом, кнопкой ответить ну и кнопка подсказки(правильного ответа).*

Ссылка на полный проект https://github.com/Jenya18/maths.git

// сложение
const addition = document.querySelector('.addition'),
    additionInput = document.querySelector('.addition > input'),
    additionBtn = document.querySelector('.addition-btn'),
    numAddition1 = document.querySelector('.num__addition-1'),
    numAddition2 = document.querySelector('.num__addition-2');
// вычитание
const subtraction = document.querySelector('.subtraction'),
    subtractionInput = document.querySelector('.subtraction > input'),
    subtractionBtn = document.querySelector('.subtraction-btn'),
    numSubtraction1 = document.querySelector('.num__subtraction-1'),
    numSubtraction2 = document.querySelector('.num__subtraction-2');

// умножение
const multiplication = document.querySelector('.multiplication'),
    multiplicationInput = document.querySelector('.multiplication > input'),
    numMultiplication1 = document.querySelector('.num__multiplication-1'),
    numMultiplication2 = document.querySelector('.num__multiplication-2'),
    multiplicationBtn = document.querySelector('.multiplication-btn');



// попап
const popupMask = document.querySelector('.popup-mask'),
    popupInfo = popupMask.querySelector('.popup-info'),
    popup = popupMask.querySelector('.popup');


popupMask.addEventListener('click', function () {
    popupMask.classList.add('hidden');
});

function successAnswer() {
    popupMask.classList.remove('hidden');
    popupMask.classList.add('show');
    popupInfo.innerHTML = 'Правильно, молодец!';
    popup.classList.remove('errorOption');
    popup.classList.add('successOption');
    setTimeout(() => {
        location.reload();
    }, 3000);
    popupMask.addEventListener('click', function () {
        location.reload();
    });
}

function errorAnswer() {
    popupMask.classList.remove('hidden');
    popupMask.classList.add('show');
    popupInfo.innerHTML = 'Не правильно, <br/>Подумай еще.';
    popup.classList.add('errorOption');
    setTimeout(() => {
        popupMask.classList.add('hidden');
    }, 3000);
}



// сложение
function randomNumberAddition() {
    let n1 = (Math.floor(Math.random() * 100) + 1);
    let n2 = (Math.floor(Math.random() * 100) + 1);
    let res = n1 + n2;
    numAddition1.innerHTML = n1;
    numAddition2.innerHTML = n2;

    additionBtn.addEventListener('click', function () {
        if (res == additionInput.value) {
            successAnswer();
        } else {
            errorAnswer();
        }
    });
    let answer = document.querySelector('.answer__addition');
    answer.onclick = function () {
        answer.innerHTML = res;
    };
    additionInput.addEventListener('keyup', function (e) {
        e = e || window.event;
        if (e.keyCode == 13) additionBtn.click();
    });
    console.log(res);
}
randomNumberAddition();



// вычитание
function randomNumberSubtraction() {
    let n1 = (Math.floor(Math.random() * 100) + 196);
    let n2 = (Math.floor(Math.random() * 100) + 13);
    let res = n1 - n2;
    numSubtraction1.innerHTML = n1;
    numSubtraction2.innerHTML = n2;

    subtractionBtn.addEventListener('click', function () {
        if (res == subtractionInput.value) {
            successAnswer();
        } else {
            errorAnswer();
        }
    });
    let answer = document.querySelector('.answer__subtraction');
    answer.onclick = function () {
        answer.innerHTML = res;
    };
    subtractionInput.addEventListener('keyup', function (e) {
        e = e || window.event;
        if (e.keyCode == 13) subtractionBtn.click();
    });
    console.log(res);
}
randomNumberSubtraction();



// умножение
function randomNumberMultiplication() {
    let n1 = (Math.floor(Math.random() * 12) + 1);
    let n2 = (Math.floor(Math.random() * 12) + 1);
    let res = n1 * n2;
    numMultiplication1.innerHTML = n1;
    numMultiplication2.innerHTML = n2;
    multiplicationBtn.addEventListener('click', function () {
        if (res == multiplicationInput.value) {
            successAnswer();
        } else {
            errorAnswer();
        }
    });
    let answer = document.querySelector('.answer__multiplication');
    answer.onclick = function () {
        answer.innerHTML = res;
    };
    multiplicationInput.addEventListener('keyup', function (e) {
        e = e || window.event;
        if (e.keyCode == 13) multiplicationBtn.click();
    });
    console.log(res);
}
randomNumberMultiplication();

body {
    background-color: rgb(3, 85, 139);
    color: #fff;
    font-family: sans-serif;
}


.answer--style {
    cursor: pointer;
    color: rgb(18, 185, 93);
    display: inline-block;
}

.answer--style img {
    width: 25px;
    height: 25px;
}

.answer--style img:hover {
    border: 2px solid #fff;
    border-radius: 50%;
    background-color: rgb(144, 43, 226);
}

.answer--style:hover {
    color: rgb(18, 185, 93);
}

.popup-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.623);


    z-index: 1;
    opacity: 0;
    overflow: hidden;
    visibility: hidden;
    transition: .3s linear;
}

.popup-mask.show {
    opacity: 1;
    overflow: visible;
    visibility: visible;
    transition: .3s linear;
}

.popup-mask.hidden {
    opacity: 0;
    overflow: hidden;
    visibility: hidden;
    transition: .3s linear;
}

.popup {
    width: 30%;
    height: 40%;
    border-radius: 43% 57% 62% 38% / 27% 49% 51% 73%;
    position: relative;
    top: 30px;
    left: 66%;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;


    -webkit-box-shadow: 5px 5px 5px 0px #000000, inset 4px 4px 15px 0px #000000, 4px 1px 15px 5px rgba(79, 255, 80, 0);
    box-shadow: 5px 5px 5px 0px #000000, inset 4px 4px 15px 0px #000000, 4px 1px 15px 5px rgba(79, 255, 80, 0);


    /* -webkit-box-shadow: 4px 5px 50px 50px rgba(255,255,255,0.2); 
    box-shadow: 4px 5px 50px 50px rgba(255,255,255,0.2); */
}

.popup.successOption {
    background-image: linear-gradient(5deg,
            hsl(171deg 75% 28%) 0%,
            hsl(164deg 100% 27%) 24%,
            hsl(153deg 100% 29%) 35%,
            hsl(135deg 81% 34%) 45%,
            hsl(139deg 81% 38%) 55%,
            hsl(160deg 100% 40%) 65%,
            hsl(171deg 100% 45%) 76%,
            hsl(179deg 100% 50%) 100%);
    color: #fff;
    letter-spacing: 1.5px;
    font-weight: bold;
    font-size: 20px;
}

.popup.errorOption {
    background-image: linear-gradient(345deg,
            hsl(0deg 85% 35%) 0%,
            hsl(322deg 100% 23%) 33%,
            hsl(321deg 100% 27%) 67%,
            hsl(0deg 78% 51%) 100%);
    color: #fff;
    letter-spacing: 1.5px;
    font-weight: bold;
    font-size: 20px;

}

.popup-info {
    line-height: 30px;
}




a + a {
    margin-left: 50px;
}

<!--index.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>Document</title>
    <link rel="stylesheet" href="style/stylereset.css">
    <link rel="stylesheet" href="style/style.css">

    <link rel="stylesheet" href="addition.html">
    <link rel="stylesheet" href="subtraction.html">
    <link rel="stylesheet" href="multiplication.html">
</head>

<body>

    <div class="popup-mask">
        <div class="popup">
            <div class="popup-info"></div>
        </div>
    </div>


<div class="select">
    <div class="select__inner">
        <a href="addition.html" class="select__addition">Сложение (+)</a>
        <a href="subtraction.html" class="select__substraction">Вычитание (-)</a>
        <a href="multiplication.html" class="select__multiplication">Умножение (*)</a>
    </div>
</div>



    <script src="js/script.js"></script>
</body>

</html>
<!-- /index.html-->


<!--substraction.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>Вычитание (-)</title>
    <link rel="stylesheet" href="style/stylereset.css">
    <link rel="stylesheet" href="style/style.css">
    <link rel="stylesheet" href="index.html">
    <link rel="stylesheet" href="addition.html">
    <link rel="stylesheet" href="multiplication.html">
</head>

<body>

    <div class="popup-mask">
        <div class="popup">
            <div class="popup-info"></div>
        </div>
    </div>


    <!-- вычитание -->
    <div class="subtraction">
        <span class="num__subtraction-1"></span>
        <span>-</span>
        <span class="num__subtraction-2"></span>
        <input type="text">
        <button class="subtraction-btn">Ответить</button>
        <div class="answer__subtraction answer--style"><img src="img/answer.png" alt="Watch"></div>

    </div>

    <script src="js/script.js"></script>
</body>

</html>
<!--/substraction.html-->


<!--addition.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>Сложение (+)</title>
    <link rel="stylesheet" href="style/stylereset.css">
    <link rel="stylesheet" href="style/style.css">

    <link rel="stylesheet" href="index.html">
    <link rel="stylesheet" href="subtraction.html">
    <link rel="stylesheet" href="multiplication.html">
</head>

<body>

    <div class="popup-mask">
        <div class="popup">
            <div class="popup-info"></div>
        </div>
    </div>

    <!-- сложение -->
    <div class="addition">
        <span class="num__addition-1"></span>
        <span>+</span>
        <span class="num__addition-2"></span>
        <input type="text">
        <input type="submit" class="addition-btn" value="Ответить">
    </form>
        <div class="answer__addition answer--style"><img src="img/answer.png" alt="Watch"></div>
    </div>

    <script src="js/script.js"></script>
</body>

</html>
<!--/addition.html-->


<!--multiplication.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>Умножение (*)</title>
    <link rel="stylesheet" href="style/stylereset.css">
    <link rel="stylesheet" href="style/style.css">
    <link rel="stylesheet" href="index.html">
    <link rel="stylesheet" href="addition.html">
    <link rel="stylesheet" href="subtraction.html">
</head>

<body>

    <div class="popup-mask">
        <div class="popup">
            <div class="popup-info"></div>
        </div>
    </div>

    <!-- умножение -->
    <div class="multiplication">
        <span class="num__multiplication-1"></span>
        <span>*</span>
        <span class="num__multiplication-2"></span>
        <input type="text">
        <button type="submit" class="multiplication-btn">Ответить</button>
        <div class="answer__multiplication answer--style"><img src="img/answer.png" alt="Watch"></div>
    </div>


    <script src="js/script.js"></script>
</body>

</html>
<!--/multiplication.html-->

Answer 1

Я запустил ваш проект, но не увидел указанной вами ошибки script.js:65 Uncaught TypeError: Cannot read properties of null (reading 'addEventListener, зато были такие: Cannot set properties of null (setting 'innerHTML')

Перед каким-либо обращением к DOM убедитесь, что данный элемент существует, ведь у вас один js файл на все страницы (Я бы разбил на несколько, чтобы таких инцидентов не было).

// сложение
const addition = document.querySelector('.addition'),
    additionInput = document.querySelector('.addition > input'),
    additionBtn = document.querySelector('.addition-btn'),
    numAddition1 = document.querySelector('.num__addition-1'),
    numAddition2 = document.querySelector('.num__addition-2');
// вычитание
const subtraction = document.querySelector('.subtraction'),
    subtractionInput = document.querySelector('.subtraction > input'),
    subtractionBtn = document.querySelector('.subtraction-btn'),
    numSubtraction1 = document.querySelector('.num__subtraction-1'),
    numSubtraction2 = document.querySelector('.num__subtraction-2');

// умножение
const multiplication = document.querySelector('.multiplication'),
    multiplicationInput = document.querySelector('.multiplication > input'),
    numMultiplication1 = document.querySelector('.num__multiplication-1'),
    numMultiplication2 = document.querySelector('.num__multiplication-2'),
    multiplicationBtn = document.querySelector('.multiplication-btn');



// попап
const popupMask = document.querySelector('.popup-mask'),
    popupInfo = popupMask.querySelector('.popup-info'),
    popup = popupMask.querySelector('.popup');


popupMask.addEventListener('click', function () {
    popupMask.classList.add('hidden');
});

function successAnswer() {
    popupMask.classList.remove('hidden');
    popupMask.classList.add('show');
    popupInfo.innerHTML = 'Правильно, молодец!';
    popup.classList.remove('errorOption');
    popup.classList.add('successOption');
    setTimeout(() => {
        location.reload();
    }, 3000);
    popupMask.addEventListener('click', function () {
        location.reload();
    });
}

function errorAnswer() {
    popupMask.classList.remove('hidden');
    popupMask.classList.add('show');
    popupInfo.innerHTML = 'Не правильно, <br/>Подумай еще.';
    popup.classList.add('errorOption');
    setTimeout(() => {
        popupMask.classList.add('hidden');
    }, 3000);
}



// сложение
function randomNumberAddition() {
    if (addition) {
        let n1 = (Math.floor(Math.random() * 100) + 1);
        let n2 = (Math.floor(Math.random() * 100) + 1);
        let res = n1 + n2;
        numAddition1.innerHTML = n1;
        numAddition2.innerHTML = n2;

        additionBtn.addEventListener('click', function () {
            if (res == additionInput.value) {
                successAnswer();
            } else {
                errorAnswer();
            }
        });
        let answer = document.querySelector('.answer__addition');
        answer.onclick = function () {
            answer.innerHTML = res;
        };
        additionInput.addEventListener('keyup', function (e) {
            e = e || window.event;
            if (e.keyCode == 13) additionBtn.click();
        });
        console.log(res);
    }
}
randomNumberAddition();



// вычитание
function randomNumberSubtraction() {
    if (subtraction) {
        let n1 = (Math.floor(Math.random() * 100) + 196);
        let n2 = (Math.floor(Math.random() * 100) + 13);
        let res = n1 - n2;
        numSubtraction1.innerHTML = n1;
        numSubtraction2.innerHTML = n2;

        subtractionBtn.addEventListener('click', function () {
            if (res == subtractionInput.value) {
                successAnswer();
            } else {
                errorAnswer();
            }
        });
        let answer = document.querySelector('.answer__subtraction');
        answer.onclick = function () {
            answer.innerHTML = res;
        };
        subtractionInput.addEventListener('keyup', function (e) {
            e = e || window.event;
            if (e.keyCode == 13) subtractionBtn.click();
        });
        console.log(res);
    }
}
randomNumberSubtraction();



// умножение
function randomNumberMultiplication() {
    if (multiplication) {
        let n1 = (Math.floor(Math.random() * 12) + 1);
        let n2 = (Math.floor(Math.random() * 12) + 1);
        let res = n1 * n2;
        numMultiplication1.innerHTML = n1;
        numMultiplication2.innerHTML = n2;
        multiplicationBtn.addEventListener('click', function () {
            if (res == multiplicationInput.value) {
                successAnswer();
            } else {
                errorAnswer();
            }
        });
        let answer = document.querySelector('.answer__multiplication');
        answer.onclick = function () {
            answer.innerHTML = res;
        };
        multiplicationInput.addEventListener('keyup', function (e) {
            e = e || window.event;
            if (e.keyCode == 13) multiplicationBtn.click();
        });
        console.log(res);
    }
}
randomNumberMultiplication();

БЛОГ НА HUSL

Разбил файл html на 3, теперь js пишет ошибку

Ответы (1 шт):