JavaScript中通过onclick修改类元素显示及代码失效问题求助

Hey there! Let's break down why your code isn't working and how to fix it. The most common culprit here is timing: your script is probably running before the browser has finished loading all the .circle elements in the DOM.

Why It's Failing #

When you run document.getElementsByClassName("circle") too early (like if your script is in the <head> section or before the .circle elements in the HTML), the browser hasn't parsed those elements yet. This means x will be an empty HTMLCollection, so your loop doesn't bind any onclick handlers at all.

Easy Fixes #

1. Move Your Script to the End of the <body>

Putting your script after all your DOM elements ensures the browser has already loaded the .circle elements when your code runs:

<body>
  <!-- Your .circle elements here -->
  <div class="circle">First Circle</div>
  <div class="circle">Second Circle</div>

  <script>
    var x = document.getElementsByClassName("circle");
    for (var i = 0; i < x.length; i++) {
      x[i].onclick = function(){ 
        alert("hello!");
      };
    }
  </script>
</body>

2. Wrap Your Code in a DOM Load Event Listener

If you prefer keeping your script in the <head> or another location, use the DOMContentLoaded event to wait until the DOM is fully ready:

document.addEventListener('DOMContentLoaded', function() {
  var x = document.getElementsByClassName("circle");
  for (var i = 0; i < x.length; i++) {
    x[i].onclick = function(){ 
      alert("hello!");
    };
  }
});

Bonus: A More Modern Alternative #

If you're open to using slightly newer JS features, querySelectorAll returns a static NodeList, and you can use forEach for cleaner looping:

document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll(".circle").forEach(circle => {
    circle.onclick = () => alert("hello!");
  });
});

Any of these approaches should get your onclick alerts working for all .circle elements.

内容的提问来源于stack exchange，提问作者Legend