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