javascriptonclick

can I do "onClick" function in a for loop?


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?


Solution

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