Question

我知道这个页面上有很多getElementsByClassName（）问题，但我不能让它们中的任何一个工作，所以我只是在这里发布并希望带来一般答案..

我的问题是我需要更改项目的css＆＃39;显示＆＃39;单击按钮时的状态，但我无法使其工作。我制作了一个显示代码的小提琴here。

HTML：

<div class="body"></div>
<input type="button" value="Click me!" onclick="display()">

CSS：

.body {
height:100px;
width:100px;
background-color: red;
}

JS：

function display () {
  var elems = document.getElementsByClassName('body');
  for (var i = 0; i < elems.length; i++) {
    elems[i].style.display = 'none';
  }
}

Answer 1

你的代码很好。问题是jsFiddle设置。由于您使用了“onLoad”选项，因此jsFiddle使用onload处理程序包装您的代码：

//<![CDATA[
window.onload=function(){
function display () {
    var elems = document.getElementsByClassName('body');
    for (var i = 0; i < elems.length; i++) {
        elems[i].style.display = 'none';
    }
}
}//]]>

由于onclick尝试在全局上下文中找到该函数，但它找不到它，因此您的代码不起作用。使用左侧面板第二个下拉菜单中的No wrap - *选项之一。

Answer 2

这很有效。它只是在小提琴中没有被正确宣布。

<html>
  <head>
    <script>
        function display () {
        var elems = document.getElementsByClassName('body');
        for (var i = 0; i < elems.length; i++) {
            console.log(elems[i]);
            elems[i].style.display = 'none';
        }
      }    
    </script>
  </head>
  <body>
    <div class="body" onclick="display()"></div>
  </body>
</html>

getElementsByClassName（）不起作用

2 个答案: