How to make this code shorter and simplier?

How to make this code shorter and simplier?
0.0 0

#1

How can I make this code shorter and simplier? And what should I do to not repeat:
document.getElementById?

document.getElementById("liSklepOnline").addEventListener("click", function(){ load("index"); }); document.getElementById("liSprzedane").addEventListener("click", function(){ load("sprzedane"); }); document.getElementById("liRegulamin").addEventListener("click", function(){ load("regulamin"); }); document.getElementById("liKontakt").addEventListener("click", function(){ load("kontakt"); }); document.getElementById("liProdukt").addEventListener("click", function(){ load("produkt"); }); document.getElementById("liProdukt2").addEventListener("click", function(){ load("produkt2"); }); document.getElementById("liProdukt3").addEventListener("click", function(){ load("produkt3"); });

function load(x)
{
var element2 = document.getElementById(x);
element.classList.remove(“hidden-class”);
element.classList.add(“show-class”);
}


#2

Try putting all of this in a for loop:

document.getElementById(“liSklepOnline”).addEventListener(“click”, function(){ load(“index”); }); document.getElementById(“liSprzedane”).addEventListener(“click”, function(){ load(“sprzedane”); }); document.getElementById(“liRegulamin”).addEventListener(“click”, function(){ load(“regulamin”); }); document.getElementById(“liKontakt”).addEventListener(“click”, function(){ load(“kontakt”); }); document.getElementById(“liProdukt”).addEventListener(“click”, function(){ load(“produkt”); }); document.getElementById(“liProdukt2”).addEventListener(“click”, function(){ load(“produkt2”); }); document.getElementById(“liProdukt3”).addEventListener(“click”, function(){ load(“produkt3”); });

Then you could iterate through each one and call the function on each element and load the appropriate data. Also, could you rename the Id’s (i.e. “liKontakt”) to just “kontakt”. This would simplify things.


#3

Hi VeesciK! You could try to identify what portions of the code that can be pulled out and iterated upon. In your case it looks like you have some element id’s that is paired with other element id’s.

document.getElementById(“liKontakt”).addEventListener(“click”, function(){ load(“kontakt”); });

Try extracting this relationship into a separate data model and iterate over this object and apply the handlers.

var items = {
    "liSklepOnline": "index",
    "liSprzedane": "sprzedane",
    "liRegulamin": "regulamin"
}

for(var key in items) {
	document.getElementById(key).addEventListener("click", function(){ load(items[key]); }); 
}

EDIT: randelldawson is right. You can also attach the event handler to the parent and then look for what the actual target the user clicked at inside this element. E.g:

<ul id="menu">
  <li data-load="#elem1">toggle elem1</li>
  <li data-load="#elem2">toggle elem2</li>
</ul>

<div id="elem1" hidden>elem1</div>
<div id="elem2" hidden>elem2</div>
var menu = document.querySelector("#menu");
menu.addEventListener("click", function(e){
	var targetSelector = e.target.dataset["load"];
	load(targetSelector)
});

#4

Are all of these elements contained in another element (i.e a div)? If so, you could use event delegation. Provide the html code which shows these elements and I can show you how to use event delegation to avoid all of those addEventListeners.