JavaScript For Loop not returning anything (not running)?

Question

Ok so, I've got this for loop in a script tag on my EJS page. The current code looks like this:

<script async>
    var removeCartItemButtons = document.getElementsByClassName('btn-danger')
    console.log(removeCartItemButtons)
    var i;
    for (i = 0; i < removeCartItemButtons.length; i++){
        console.log('elem')
        var button = removeCartItemButtons[i]
        button.addEventListener('click', function() {
            console.log('clicked')
        })
    }
</script>

The console.log for the removeCartItemButtons works but the console.log('elem') doesn't run. There are no errors in my cmd nor on the developer tools. I've looked online at different forums to find people doing similar things to me and their's work fine.

I've tried multiple things, and an extra notice is that this is inside the html file and not external.

The end goal of this for loop is to loop through every element with class 'btn-danger' and log when they are clicked. Any help would be amazing!

Answer 1

try running document.getElementsByClassName('btn-danger') in the console.

Additional tip: there is a for of loop in js

check this: https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Statements/for...of basically:

for(let button of removeCartItemButtons) {
     button.addListener
}

Answer 2

I tried this code in Codepen and it worked. I rewrite your code but technically, just used a different syntax. "async" in your script tag can cause the problem, I can't be sure.

var buttons = document.querySelectorAll('.btn-danger');
[...buttons].forEach(button => {
  console.log('elem')
  button.addEventListener('click', function() {
    console.log('clicked')
  })
})

Answer 3

There must be an issue with your HTML code. Run the snippet below, it's working fine

 var removeCartItemButtons = document.getElementsByClassName('btn-danger') console.log(removeCartItemButtons) var i; for (i = 0; i < removeCartItemButtons.length; i++) { console.log('elem') var button = removeCartItemButtons[i] button.addEventListener('click', function() { console.log('clicked'); alert('clicked'); }) }

 <button class='btn-danger'>Button</button> <br/> <button class='btn-danger'>Button</button> <br/> <button class='btn-danger'>Button</button> <br/> <button class='btn-danger'>Button</button>

Answer 4

removeCartItemButtons.length is 0 because when the snippet ran the DOM was not fully loaded.

Remove async and put your script at the end of your html.

Another option is to use an EventListener like onload to make sure your buttons exist before changing them.