'Javascript uncaught type error cant read property of null. Error is being caused by a different HTML page?

So I'm working on a site and decided to use 5 differed html pages, something i dont really do. Im using on javascript file, and i think when i go on to contact.html JS cant find the elements that are in index.html, which makes sense. but how do I fix this?

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>

contact.html

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


Solution 1:[1]

You should first check if the element exist or not with if conditional:

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');

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Suraj Khanal

Related Questions