How to insert arguments to dynamically created onclick function in javascript?

Question

Here i am created the button element with onclick function dynamically, I need to pass arguments through that onclick function to main function.but its not working I need some guidance ...

var ar=["london","tokyo","india","pakistan"];
var cr=["green","blue","orange","pink"];
for(var j=0;j<ar.length;j++)
{

    var but=document.createElement("button");
    but.classList.add("divs");
    but.onclick = function() {
        myfun(ar[j],this,cr[j]);
    }
   but.textContent=ar[j];
   document.getElementById("main").appendChild(but);
  }

  function myfun(city,elemt,color)
 {
     var butt=document.getElementsByClassName("divs");
     for(var z=0;z<butt.length;z++)
 {
     butt[z].style.backgroundColor="";
  } 
 document.getElementById(city).style.display="block";
 elemt.style.backgroundColor=color;


  }

You might be running into closure issues in for loops: https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example. Also, wheny ou say it is not working: please elabourate on *what* is exactly broken and not working as expected. — Terry, Apr 21 '20 at 12:54

IvaMuxa · Accepted Answer · 2020-04-21T13:50:00.730

0

var ar = ["london", "tokyo", "india", "pakistan"];
var cr = ["green", "blue", "orange", "pink"];
for (var j = 0; j < ar.length; j++) {
    let jj = j;          //add this
    var but = document.createElement("button");
    but.classList.add("divs");
    but.id = ar[j];    // and dont forget this
    but.onclick = function () {
        myfun(ar[jj], this, cr[jj]); //must use jj when click j will = 4
    }
    but.textContent = ar[j];
    document.getElementById("main").appendChild(but);
}

function myfun(city, elemt, color) {
    var butt = document.getElementsByClassName("divs");
    for (var z = 0; z < butt.length; z++) {
        butt[z].style.backgroundColor = "";
    }
    document.getElementById(city).style.display = "block";
    elemt.style.backgroundColor = color;


}

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body id="main">

</body>
</html>

edited Apr 21 '20 at 13:50

answered Apr 21 '20 at 12:54

IvaMuxa

136
5

when user click button j always = 4 – IvaMuxa Apr 21 '20 at 13:40
No I cheked the console.log(ar[ j ]) and cr[ j ] its printing the values line by line ..... – Lakshmi Ram Apr 21 '20 at 13:57
Just run code snippet the buttons now change style as u wish – IvaMuxa Apr 21 '20 at 14:02
yeah its working as i want but can you please give a explanation for that, let jj=j; – Lakshmi Ram Apr 21 '20 at 14:41
when attaching event listeners in the cycle j = 0,1,2,3. But the function itself will start later, when the user click the button, then j = 3 since the cycle has already ended – IvaMuxa Apr 21 '20 at 15:20
inside each pass, a new variable jj is declared, so different values are given to the function – IvaMuxa Apr 21 '20 at 15:24

How to insert arguments to dynamically created onclick function in javascript?

1 Answers1