.setAttribute 在 for 循环中不起作用 - JavaScript答案

【问题标题】：.setAttribute doesn't work in for-loop - JavaScript.setAttribute 在 for 循环中不起作用 - JavaScript
【发布时间】：2018-08-15 19:08:16
【问题描述】：

我的 JS 脚本有一个小问题。我试图给数组中的每个元素一个不同的数字，这些数字也被设置在一个数组中。当然，我使用了 for 循环。现在在 for 循环之外，这工作正常。

var i = 0;
document.getElementsByClassName("MosaikBilder")[i].setAttribute("value", BilderListe[i]);

但是一旦我把它放到一个for循环中，整个脚本就不能执行了。浏览器根本不会加载脚本。

var AlleBilder = document.getElementsByClassName("MosaikBilder");
for(i=0; i<AlleBilder.length -1; i++){
    document.getElementsByClassName("MosaikBilder")[i].setAttribute("value", BilderListe[i]);
}

为了更好地理解这一点，html和css：

HTML：

<div class="padding"></div>
<img class="MosaikBilder" src="B1.png" value=0 >
<img class="MosaikBilder" src="B2.png" value=0 >
<img class="MosaikBilder" src="B3.png" value=0 >
<img class="MosaikBilder" src="B4.png" value=0 >
<img class="MosaikBilder" src="B5.png" value=0 >
<img class="MosaikBilder" src="B6.png" value=0 >
<div style="clear: both"></div>
<div class="padding"></div>

CSS：

    title {
        display: none;
    }

    .padding {
        width: 100%;
        height: 200px;
        background-color: red;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .MosaikBilder {
        margin: 10px;
        float: left;
    }

BilderListe 是一个普通数组，它由以下 JS 生成：

function Zahlenzuweisung(){
    for(var i=0 ; i<BilderListe.length; i++){
        BilderListe[i] = Math.round(Math.random()*1000);
        if(BilderListe[i] > 1000){
            BilderListe[i] = 1000;
        }
    }

该数组包含 15 个随机生成的数字，看起来没问题。该阵列的其他一切工作正常。

有什么建议为什么我将一行代码放入for循环后整个脚本没有被执行？

非常感谢任何帮助，我相对较新，感谢各种帮助:)

编辑：这是小提琴。这是我的第一个，所以它可能会在某些边缘失败 https://jsfiddle.net/ugdb1423/6/

注意：脚本背后的整个想法是在每次加载页面时重新排列图片。我开始生成一个随机数列表，没有任何加倍的随机数。完成此操作后，我想获取列表中的所有图片并给它们一个随机数。然后我想对该列表进行排序，删除图片并将它们按新顺序放回。为了存储生成的数字，我想到了使用“值”属性。就像我说的，它似乎在 for 循环之外工作，但不在内部。

【问题讨论】：

你能做个js小提琴吗
好吧，一件事，不要在你的循环中重复你的选择器。使用您正在循环的变量。
我认为我们缺少一个更大的问题。 img 元素没有 value 属性....你的逻辑没有意义。
实际上你应该访问 array[i] 所以在你的代码中它将是 AlleBilder[i] in forloop
到目前为止非常感谢。我尽我所能添加了一个小提琴（这是我的第一个）和一个小笔记来理解整个脚本。

标签： javascript html css for-loop

【解决方案1】：

我不太明白你如何生成“BilderListe”数组，但是包含 15 个随机生成的数字，每个数字最大 1000，你可以在“Zahlenzuweisung”内创建一个数组，代码如下：

var BilderListe = [];

for (var i = 0; i < 15; i++) {
  var num = Math.round(Math.random()*1000);
  if(num > 1000){
    num = 1000;
    BilderListe.push(num);
  }else {
    BilderListe.push(num);
  }
}

然后您可以使用以下脚本来更改图像的每个值

var AlleBilder = document.getElementsByClassName("MosaikBilder");
for(i=0; i<AlleBilder.length -1; i++){
  AlleBilder[i].setAttribute("value", BilderListe[i]);
}

但请注意，如果此代码 sn-p 在 'Zahlenzuweisung' 函数内，则可以使用它。因为“BilderListe”数组是在函数本地声明的。如果你想在全球范围内使用它，请使用

var BilderListe = [];

函数外声明

【讨论】：

您好，感谢您的帮助！我用小提琴编辑了我的帖子，您可以在其中看到整个脚本。 BilderListe 是全局的，for 循环就像您发布的那样。但它仍然不会加载。一旦我更改 for 循环并删除 .setAttribute 代码，它就会再次打开。

【解决方案2】：

发现问题：

这实际上是您在小提琴中看到的最后一个函数。我不知道为什么，但由于该功能适用于 AlleBilder 它可能带来了一些复杂性。

感谢所有帮助过的人！ :)

【讨论】：