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

时间:2018-08-15 19:08:16

标签: javascript html css for-loop

我的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循环之外起作用,而不是在内部起作用。

2 个答案:

答案 0 :(得分:0)

我真的不明白如何生成“ 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]);
}

但是请注意,如果此代码段位于'Zahlenzuweisung'函数内部,则可以使用它。因为'BilderListe'数组是在函数本地声明的。如果要在全球范围内使用它,请使用

var BilderListe = [];

函数外的声明

答案 1 :(得分:0)

发现问题:

实际上是您在小提琴中可以看到的最后一个功能。 我不知道为什么,但是由于该功能可与AlleBilder一起使用 它可能会带来一些并发症。

感谢所有提供帮助的人! :)