An function argument that contains an array

Question

So, I have a question. Inside a function I have a createElement() function that creates a li. I also use the setAttribute() function to add a onclick(). But here's my question, can i store like an array inside the onclick(), so i can get the array in a new functions argument? What should i put inside 'changeClass("' + '");') ? ("names" is a global variable that contains an array. "numberOfCookies" is nothing to worry about.)

function getClassCookie() {
  var cookiesArray = document.cookie.split(';');
  numberOfCookies = cookiesArray.length;
  for (var i = 0; i < cookiesArray.length; i++) {
    var nameValueArray = cookiesArray[i].split('=');
    var split = nameValueArray[1].split(',');
    var className = split[0];
    var copySplit = split.slice();
    copySplit.splice(0, 1);
    names = copySplit;
    var newLi = document.createElement('li');
    var textNode = document.createTextNode(className);

    newLi.setAttribute('onclick', 'changeClass("' + '");');

    newLi.setAttribute('onclick', 'hideDropdown();');
    newLi.appendChild(textNode);
    var parent = document.getElementById('classes');
    parent.appendChild(newLi);
  }
}

function changeClass(c) {
  names = c;
}

Answer 1

You can use the array in the handler with a closure , if you attach the handler properly with Javascript, such as with addEventListener . (Inline handlers are generally difficult to manage and aren't considered good practice, anyway). For example, once you've declared newLi , simply reference the array you want to call changeClass with later:

newLi.addEventListener('click', function() {
  changeClass(copySplit);
});

The above code will allow the copySplit that was created in that iteration of the for loop to be the one that's referenced when the newLi is clicked later. (This technique isn't possible when you use inline handlers)

One more thing - variables declared with var are hoisted and have unintuitive function scope, rather than block scope. Make sure to use const or let instead, which have block scope (that way each iteration of the loop has separate bindings for variables, rather than all iterations sharing a single set of variables):

for (let i = 0; i < cookiesArray.length; i++) {
  const nameValueArray = cookiesArray[i].split('=');
  const split = nameValueArray[1].split(',');
  const className = split[0];
  const copySplit = split.slice();
  // etc

Answer 2

Using string concatenation for the function name while attaching it to an attribute isn't really a good approach. Just use the function hook. If you need to pass parameters into it, then you can do that as well in an anonymous call.

In the example below, note that the demo array maintains its state on subsequent clicks because of its scope.

 function handler(arr){ arr.push(arr.length); console.log(arr); } (function demo(){ var newButton = document.createElement('button'); newButton.textContent = "Demo"; var someArray = []; newButton.onclick = function(){ handler(someArray); } document.body.appendChild(newButton); })()