I made html page where you click and activate function by the id of html-element. It took me many lines in javascript. can I short the by a for loop?
this is my html code:
<ul>
<li class="card" id="c0"><img id="i0" src="images\westren_wall.jpg"></li>
<li class="card" id="c1"><img id="i1" src="images\westren_wall.jpg"></li>
<li class="card" id="c2"><img id="i2" src="images\idf.jpg"></li>
<li class="card" id="c3"><img id="i3" src="images\idf.jpg"></li>
<li class="card" id="c4"><img id="i4" src="images\jerusalem.jpg"></li>
<li class="card" id="c5"><img id="i5" src="images\jerusalem.jpg"></li>
<li class="card" id="c6"><img id="i6" src="images\sixDays.jpg"></li>
<li class="card" id="c7"><img id="i7" src="images\sixDays.jpg"></li>
<li class="card" id="c8"><img id="i8" src="images\BGurion.jpg"></li>
<li class="card" id="c9"><img id="i9" src="images\BGurion.jpg"></li>
<li class="card" id="c10"><img id="i10" src="images\hertzel.png"></li>
<li class="card" id="c11"><img id="i11" src="images\hertzel.png"></li>
<li class="card" id="c12"><img id="i12" src="images\vaizman.png"></li>
<li class="card" id="c13"><img id="i13" src="images\vaizman.png"></li>
<li class="card" id="c14"><img id="i14" src="images\menora.jpg"></li>
<li class="card" id="c15"><img id="i15" src="images\menora.jpg"></li>
<li class="card" id="c16"><img id="i16" src="images\knesset.jpg"></li>
<li class="card" id="c17"><img id="i17" src="images\knesset.jpg"></li>
I use it do active a function when clicking by this javascript code:
document.getElementById("c0").onclick = function(){openCard("i0",1)};
document.getElementById("c1").onclick = function(){openCard("i1", 1)};
document.getElementById("c2").onclick = function(){openCard("i2",2)};
document.getElementById("c3").onclick = function(){openCard("i3",2)};
document.getElementById("c4").onclick = function(){openCard("i4",3)};
document.getElementById("c5").onclick = function(){openCard("i5",3)};
document.getElementById("c6").onclick = function(){openCard("i6",4)};
document.getElementById("c7").onclick = function(){openCard("i7",4)};
document.getElementById("c8").onclick = function(){openCard("i8",5)};
document.getElementById("c9").onclick = function(){openCard("i9",5)};
document.getElementById("c10").onclick = function(){openCard("i10",6)};
document.getElementById("c11").onclick = function(){openCard("i11",6)};
document.getElementById("c12").onclick = function(){openCard("i12",7)};
document.getElementById("c13").onclick = function(){openCard("i13",7)};
document.getElementById("c14").onclick = function(){openCard("i14",8)};
document.getElementById("c15").onclick = function(){openCard("i15",8)};
document.getElementById("c16").onclick = function(){openCard("i16",9)};
document.getElementById("c17").onclick = function(){openCard("i17",9)};
can I short this code lines by a for loop?
If you set a custom attribute on your every img
element like data-img-index
,then you can set click event on every classname with value card. Finally get the id
and custom attribute value i.e data-img-index
like this way to pass on your openCard(id, attr);
method
Id: var id = this.children[0].id;
Custom Attr: var attr = this.children[0].attributes['data-img-index'].nodeValue;
var classname = document.getElementsByClassName("card");
for (var i = 0; i < classname.length; i++) {
classname[i].addEventListener('click', function() {
var id = this.children[0].id;
var attr = this.children[0].attributes['data-img-index'].nodeValue;
openCard(id, attr);
});
}
function openCard(id, num) {
console.log(id, num)
}
<html>
<body>
<ul>
<li class="card" id="c0"><img id="i0" data-img-index=1 src="images\westren_wall.jpg"></li>
<li class="card" id="c1"><img id="i1" data-img-index=1 src="images\westren_wall.jpg"></li>
<li class="card" id="c2"><img id="i2" data-img-index=2 src="images\idf.jpg"></li>
<li class="card" id="c3"><img id="i3" data-img-index=2 src="images\idf.jpg"></li>
<li class="card" id="c4"><img id="i4" data-img-index=3 src="images\jerusalem.jpg"></li>
<li class="card" id="c5"><img id="i5" data-img-index=3 src="images\jerusalem.jpg"></li>
<li class="card" id="c6"><img id="i6" data-img-index=4 src="images\sixDays.jpg"></li>
<li class="card" id="c7"><img id="i7" data-img-index=4 src="images\sixDays.jpg"></li>
<li class="card" id="c8"><img id="i8" data-img-index=5 src="images\BGurion.jpg"></li>
<li class="card" id="c9"><img id="i9" data-img-index=5 src="images\BGurion.jpg"></li>
<li class="card" id="c10"><img id="i10" data-img-index=6 src="images\hertzel.png"></li>
<li class="card" id="c11"><img id="i11" data-img-index=6 src="images\hertzel.png"></li>
<li class="card" id="c12"><img id="i12" data-img-index=7 src="images\vaizman.png"></li>
<li class="card" id="c13"><img id="i13" data-img-index=7 src="images\vaizman.png"></li>
<li class="card" id="c14"><img id="i14" data-img-index=8 src="images\menora.jpg"></li>
<li class="card" id="c15"><img id="i15" data-img-index=8 src="images\menora.jpg"></li>
<li class="card" id="c16"><img id="i16" data-img-index=9 src="images\knesset.jpg"></li>
<li class="card" id="c17"><img id="i17" data-img-index=9 src="images\knesset.jpg"></li>
</ul>
</body>
</html>