I started to learn Javascript and I'm building some sites to improve my skills. But here I would like to share with you a code that I couldn't simplify. As you will realize, I'm getting the ID of some DIVS to then add a event that go to differents categories. But, I can't find the way to make it easier without use all this code.
let entradas = document.getElementById("entradas");
entradas.addEventListener("click",irUrl1);
function irUrl1 () {
window.location = "https://jikan.es/menu/entradas"
}
let veggie = document.getElementById("veggie");
veggie.addEventListener("click",irUrl2);
function irUrl2 () {
window.location = "https://jikan.es/menu/veggie"
}
let rollsEspeciales = document.getElementById("rolls-especiales");
rollsEspeciales.addEventListener("click",irUrl3);
function irUrl3 () {
window.location = "https://jikan.es/menu/especiales"
}
let pokeBowls = document.getElementById("poke-bowls");pokeBowls.addEventListener("click",irUrl4);
function irUrl4 () {
window.location = "https://jikan.es/menu/poke-bowls"
}
let sashimi = document.getElementById("sashimi-niguiris");
sashimi.addEventListener("click",irUrl5);
function irUrl5 () {
window.location = "https://jikan.es/menu/sashimi-niguiris"
}
let combinados = document.getElementById("combinados");
combinados.addEventListener("click",irUrl6);
function irUrl6 () {
window.location = "https://jikan.es/menu/combinados"
}
let rollsClasic = document.getElementById("rolls-clasicos");
rollsClasic.addEventListener("click",irUrl7);
function irUrl7 () {
window.location = "https://jikan.es/menu/rolls-clasicos"
}
let rollsSignature = document.getElementById("rolls-signature");
rollsSignature.addEventListener("click",irUrl8);
function irUrl8 () {
window.location = "https://jikan.es/menu/rolls-signature"
}
let promociones = document.getElementById("promociones");
promociones.addEventListener("click",irUrl9);
function irUrl9 () {
window.location = "https://jikan.es/menu/promociones"
}
</script>```
You can do everything in one line:
document.querySelectorAll("#entradas,#veggie,#rolls-especiales,#poke-bowls,#sashimi-niguiris,#combinados,#rolls-clasico,#rolls-signature,#promociones").forEach(el=>el.addEventListener("click",()=>window.location = "https://jikan.es/menu/"+el.id.replace("rolls-especiales","especiales")));There seems to be one exception to the rule which I have taken care of with the replace() function: the id #rolls-especiales needs to be redirected to especiales (without "rolls-").
However, the best solution would still be to simply use <a href="..."> tags of some kind in the html markup.
You can simplify the codes from:
let entradas = document.getElementById("entradas");
entradas.addEventListener("click",irUrl1);
function irUrl1 () {
window.location = "https://jikan.es/menu/entradas"
}
to:
document.getElementById("entradas").addEventListener("click", function() {
window.location = "https://jikan.es/menu/entradas";
});
or you can use jQuery:
$('#entradas').click(function() {
window.location = "https://jikan.es/menu/entradas";
});
['entradas', 'veggie'].forEach(id => {
document.getElementById(id).addEventListener('click', () => {
window.location = `https://jikan.es/menu/${id}`
})
})
this should reduce your repetition, but still I think the correct way to code would be to use anchor tags styled like your divs e.g.
<a style="whatever styles your div has" href="..." />