Así que estoy trabajando en un sitio y decidí usar 5 páginas html diferentes, algo que realmente no hago. Estoy usando un archivo javascript, y creo que cuando voy a contact.html JS no puedo encontrar los elementos que están en index.html, lo cual tiene sentido. pero como soluciono esto?
guión.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');índice.html
<html> <body> <h1 id="alpha">test</h1> <h1 id="beta">test</h1> <h1 id="charlie">test</h1> </body> </html>contacto.html
<html> <body> <div id="contact-us"> <h1>Click me!</h1> </div> </body> </html>Primero debe verificar si el elemento existe o no con condicional:
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');