Question

I’ve got a simple array of options which essentially dictate which buttons should be visible through the web application at any point.

So for home the array looks like: Step 1

if (view === "home") {
  visibleCommands = [];
  visibleCommands[0] = "contact";
  visibleCommands[1] = "about";
}
setVisibility(visibleCommands);

Then I loop through the array: Step 2

setVisibility(visibleCommands) {
  var i;
  for (i in visibleCommands) {
    document.getElementById(visibleCommands[i].style.display = "inline";
  }
  addEvents(visibleCommands);
}

Then lastly, for the visible commands I want to add separate event listeners: Step 3

addEvents(visibleCommands) {
  var i;
  for (i in visibleCommands) {
    document.getElementById(visibleCommands[i]).addEventListener("click", visibleCommands[i], false);  
  }
}

However the event doesn’t seem to get hooked up to the element in the view, if I change this line to:

document.getElementById(visibleCommands[i]).addEventListener("click", contact, false);

Then it correctly gets hooked up to the element and the contact() function gets called.

What am I doing wrong?

Answer 1

Your code:

document.getElementById(visibleCommands[i]).addEventListener("click", visibleCommands[i], false);

visibleCommands[i] is the id:

document.getElementById(visibleCommands[i])

visibleCommands[i] is the click callback:

.addEventListener("click", visibleCommands[i], false);

How can it be?

"contact" and contact are two diffrent things. The first is a string with contact value, while the second is a reference to a function

---

Another thing:

document.getElementById(visibleCommands[i].style.display = "inline";

There is a missing ) in the getElementById function call:

document.getElementById(visibleCommands[i]).style.display = "inline";