How can I use Javascript to simplify this code?-CodePudding

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>```

CodePudding user response：

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";
});

CodePudding user response：

['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="..." />

CodePudding user response：

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.