Ошибка неперехваченного типа Javascript не может прочитать свойство null. Ошибка вызвана другой HTML-страницей?

Итак, я работаю над сайтом и решил использовать 5 разных html-страниц, чего я действительно не делаю. Я использую файл javascript, и я думаю, что когда я перехожу к contact.html, JS не может найти элементы, которые находятся в index.html, что имеет смысл. но как мне это исправить?

script.js

//code i'd like to run in index.html
let highlighter = (selected, ignored1, ignored2) => {
        document.getElementById(selected).addEventListener("click", ()=> {
            let highlighted = document.getElementById(selected).style.backgroundColor = "#ECECEC";
            let ignored = [ignored1,ignored2];
            for (let i = 0; i < ignored.length; i++) {
                document.getElementById(ignored[i]).style.backgroundColor = "#FFFFFF"
            }
        });
}
highlighter("alpha", "beta", "charlie");
highlighter("beta", "alpha", "charlie");
highlighter("charlie", "alpha", "beta");

//code i'd like to run in contact.html
document.getElementById("contact-us").addEventListener("click", ()=> {
    alert("contact us test");
});

//code i'd like to have run everywhere
alert('test');

index.html

<html>
    <body>
        <h1 id = "alpha">test</h1>
        <h1 id = "beta">test</h1>
        <h1 id = "charlie">test</h1>

    </body>
</html>

контакт.html

<html>
    <body>
        <div id = "contact-us">
            <h1>Click me!</h1>
        </div>
    </body>
</html>

Используйте условный оператор, чтобы проверить, существует ли элемент или нет, прежде чем применять что-либо к этому элементу.

Suraj Khanal 23.04.2022 09:29
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
1
25
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Сначала вы должны проверить, существует ли элемент или нет с условием if:

let highlighter = (selected, ignored1, ignored2) => {
        if (!document.getElementById(selected)) {
           return;
        }
        document.getElementById(selected).addEventListener("click", ()=> {
            let highlighted = document.getElementById(selected).style.backgroundColor = "#ECECEC";
            let ignored = [ignored1,ignored2];
            for (let i = 0; i < ignored.length; i++) {
                document.getElementById(ignored[i]).style.backgroundColor = "#FFFFFF"
            }
        });
}
highlighter("alpha", "beta", "charlie");
highlighter("beta", "alpha", "charlie");
highlighter("charlie", "alpha", "beta");

//code i'd like to run in contact.html
if (document.getElementById("contact-us") {
   document.getElementById("contact-us").addEventListener("click", ()=> {
      alert("contact us test");
   });
}


//code i'd like to have run everywhere
alert('test');

Ах так просто! Большое вам спасибо, я не привык работать на веб-сайте с несколькими страницами, и если я работаю над чем-то, я обычно использую reactJS, я так давно не использовал обычный javascript!

Pylot 24.04.2022 22:47

Другие вопросы по теме