Итак, я работаю над сайтом и решил использовать 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>
Сначала вы должны проверить, существует ли элемент или нет с условием 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!
Используйте условный оператор, чтобы проверить, существует ли элемент или нет, прежде чем применять что-либо к этому элементу.