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);
}

但仍然没有运气..

这就是我的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

浏览器显示错误：document.getElementsByClassName（...）。forEach不是函数

因为getElementsByClassName没有返回数组，它会返回HTMLCollection。他们没有forEach方法（但是，它可能在某个时候，或者不是）。

你可以使用数组有这样的那个：

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

或者在现代浏览器（或使用polyfill）上，您可以从集合中创建一个数组：

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

另一种选择是将forEach添加到HTMLCollection，您可以在任何模糊的现代浏览器上执行此操作（即使是IE8，如果您首先填充Array.prototype.forEach）：

if (typeof HTMLCollection !== "undefined" && HTMLCollection.prototype && !HTMLCollection.prototype.forEach) {
    Object.defineProperty(HTMLCollection.prototype, "forEach", {
        value: Array.prototype.forEach,
        configurable: true,
        writable: true
    });
}

最后请注意，虽然HTMLCollection没有forEach，但NodeList返回的querySelectorAll却有，但在某些较旧的浏览器上可能需要polyfilled。如有必要，请参阅this answer有关填充NodeList的信息。

更多：

For-each over an array in JavaScript?（在那里有一些答案 - 包括我的 - 有一个关于＆＃34的部分;类似数组＆＃34;事情，包括HTMLCollection s）
What do querySelectorAll, getElementsByClassName and other getElementsBy* methods return?

Javascript getElementByClass（）。foreach函数不起作用

1 个答案: