getElementsByClassName（）不工作

-2

我知道這個頁面上有很多getElementsByClassName（）問題，但是我不能讓它們中的一個工作，所以我只是在這裏發佈這個，希望能夠給出一個普遍的答案。。getElementsByClassName（）不工作

我的問題是，我需要改變一個項目的CSS'顯示'狀態，當一個按鈕被點擊，但我不能得到它的工作。我做了一個小提琴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'; 
    } 
}

來源

2015-11-27 William Brochmann

你在哪裏放置的JavaScript？如果將它從「onLoad」更改爲「」「中的不包裝」，那麼您的小提琴就可以工作，因此JS在DOM之前執行。 –

身體前的劇本是？如果是，那麼功能顯示沒有被定義 - 這是我在小提琴中發現的錯誤 – TricksfortheWeb

它適用於我。 http://jsbin.com/nohuli/edit?html,css,js,output – wrick17

This works。它只是沒有在小提琴中正確申報。

<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>

來源

2015-11-27 15:54:49 alengel

這個答案沒有描述jsFiddle中的問題。 – jfriend00

我不認爲OP想知道如何使小提琴工作，他只是將它張貼到小提琴中，以表明某件事情沒有奏效。我理解的方式是他不清楚如何在HTML中運行JS。當您將我的答案發布到小提琴的HTML字段中時，答案將按預期工作。 – alengel

如果它解釋了爲什麼jsfiddle不起作用，你的答案會更好。我的評論意見是建議一種讓你的答案更好的方法。 – jfriend00

你的代碼是正確的。問題是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 - *選項之一。

來源

2015-11-27 15:53:51 undefined

getElementsByClassName（）不工作

回答

相關問題