Javascript getElementByClass（）。foreach函數不工作

Question

我想通過類名稱與JS獲取HTML的每個元素，然後更改其高度和寬度根據range對象onchange中的值。

的瀏覽器顯示錯誤：document.getElementsByClassName(...).forEach is not a function

但我想一切辦法構建有可能，仍然一無所獲......

這是我的第一個js代碼怎麼看起來像：

function updateInput(val) { 
    document.getElementById('valueInput').innerHTML=val; /*This is just to show the value to the user*/ 
    document.getElementsByClassName('oneResult').forEach(functio‌​n changeWidth(element) { element.style.width = val + 'px'; }); 
    document.getElementsByClassName('oneResult').forEach(functio‌​n changeWidth(element) { element.style.height = val + 'px'; }); 
} 

然後我嘗試這樣的：

function updateInput(val) { 
    document.getElementById('valueInput').innerHTML=val; 
    function oneResultWH(element) { 
     element.style.width = val + 'px'; 
     element.style.height = val + 'px'; 
    } 
    document.getElementsByClassName('oneResult').forEach(oneResultWH); 
} 

但STIL L沒有運氣..

這是我的PHP看起來像：

print '<div class="oneResult" style="background-image:url(Pictures/'.$img.'); height: 100px; width:100px; "> 
<a id="word'. $x .'">'. $textConversion[$x] .'</a></div>'; 

在這個問題上的任何輸入，將不勝感激！

Answer 1

The browser is showing an error: document.getElementsByClassName(...).forEach is not a function

這是因爲getElementsByClassName不返回數組，它返回HTMLCollection。他們沒有forEach方法。

您可以使用一個陣列具有這樣的：

Array.prototype.forEach.call(document.getElementsByClassName("oneResult"), function(element) { 
    // Use `element` here 
}); 

還是現代的瀏覽器（或墊片）：

Array.from(document.getElementsByClassName("oneResult")).forEach(function(element) { 
    // Use `element` here 
}); 

更多：

• For-each over an array in JavaScript?（那裏的一些答案 - 包括我的 - 有一個關於「類似數組」的東西，其中包括HTMLCollection s）
• What do querySelectorAll, getElementsByClassName and other getElementsBy* methods return?