Question

I'm trying to add an onclick event for every button that has a child in my program. Initially when I was using getElementsByClassName I was unaware of the fact that it returns an array (obvious now in hindsight) unlike getElementById that only returns one item. So I edited my code to iterate over all button elements, but still to no avail:

window.addEventListener('DOMContentLoaded', run );
function run(){
  allLIElements = document.getElementsByTagName("button")
  for (i=0; i < allLIElements.length; i++){
    var li = allLIElements[i];
    if ( li.firstElementChild != null ){
      li.classList.add('myBtn');
      // tests whether or not the element has been given the proper class
      document.getElementById('check').innerHTML = li.classList;
    }
  };

  }

//**Returns an HTMLcollection not a nodeList**

var btn = document.getElementsByClassName("myBtn");
var span = document.getElementsByClassName("close")[0];
var modal = document.getElementById('myModal');

for (i=0; i < btn.length; i++){
  btn[i].onclick = function() {
    modal.style.display = "block";
};
}
  // When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

EDIT

Here's a link to show what's happening, so right now when I click on "customer 6" for example I want a modal to appear: https://jsfiddle.net/0k617jsq/

Basically nothing is happening when I click on the button, the modal isn't activating.

Answer 1

The docs state that:

The DOMContentLoaded event is fired when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.

This means before the run functions is executed, the javascript engine tries to execute this line:

var btn = document.getElementsByClassName("myBtn");

And since no button probably has the class myBtn at this point, no handlers will be assigned to any button. One solution (among many) would be to put the var assignment and the for loop that assigns the onclick events inside the run function.

Answer 2

You should post a working example that shows the issue, otherwise we're left to guess the missing parts. Below is what can be deduced from your code.

It more or less works, so if you were to show the HTML, likely a helpful answer will ensue. You need to hide the modal on load.

window.addEventListener('DOMContentLoaded', run );
function run(){
  allLIElements = document.getElementsByTagName("button")
  for (i=0; i < allLIElements.length; i++){
    var li = allLIElements[i];
    if ( li.firstElementChild != null ){
      li.classList.add('myBtn');
      // tests whether or not the element has been given the proper class
      document.getElementById('check').innerHTML = li.classList;
    }
  };

  }

//**Returns an HTMLcollection not a nodeList**

var btn = document.getElementsByClassName("myBtn");
var span = document.getElementsByClassName("close")[0];
var modal = document.getElementById('myModal');

// hide modal initially
modal.style.display = "none";

for (i=0; i < btn.length; i++){
  btn[i].onclick = function() {
    modal.style.display = ""; // Use empty string, not 'block'
};
}
  // When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

#myModal {
  border: 1px solid red;
}

<button class="myBtn">A button <span>with an element child</span></button>
<div>Check: <span id="check"></span></div>
<div id="myModal">the modal<br>
<span class="close">close</span></div>

Add an onclick handler for every item in a for-loop

2 个答案: