首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >循环在for- .setAttribute - JavaScript中不起作用

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

Stack Overflow用户
提问于 2018-08-16 03:08:16
回答 2查看 407关注 0票数 0

我的JS脚本有一个小问题。我试图给数组中的每个元素一个不同的数字,这些数字也是在一个数组中设置的。当然,我使用了for循环。现在,在for循环之外,这可以很好地工作。

代码语言:javascript
复制
var i = 0;
document.getElementsByClassName("MosaikBilder")[i].setAttribute("value", BilderListe[i]);

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

代码语言:javascript
复制
var AlleBilder = document.getElementsByClassName("MosaikBilder");
for(i=0; i<AlleBilder.length -1; i++){
    document.getElementsByClassName("MosaikBilder")[i].setAttribute("value", BilderListe[i]);
}

为了更好地理解这一点,html和css:

HTML:

代码语言:javascript
复制
<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:

代码语言:javascript
复制
    title {
        display: none;
    }

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

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

BilderListe是一个普通的数组,它由以下JS产生:

代码语言:javascript
复制
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/

注意:脚本背后的整个想法是在每次加载页面时重新排列图片。我从生成一个没有重复的随机数列表开始。一旦完成这一点,我想得到一个列表中的所有图片,并给他们一个随机数字。然后我想对这个列表进行排序,删除图片,并将它们放回新的顺序。为了存储生成的数字,我想到了使用"value“属性。正如我所说的,它似乎在for循环之外有效,但在内部无效。

EN

回答 2

Stack Overflow用户

发布于 2018-08-16 03:29:12

我真的不能理解如何生成'BilderListe‘数组,但是包含15个随机生成的数字,每个数字最大为1000,你可以在'Zahlenzuweisung’中创建一个数组,代码如下:

代码语言:javascript
复制
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);
  }
}

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

代码语言:javascript
复制
var AlleBilder = document.getElementsByClassName("MosaikBilder");
for(i=0; i<AlleBilder.length -1; i++){
  AlleBilder[i].setAttribute("value", BilderListe[i]);
}

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

代码语言:javascript
复制
var BilderListe = [];

在函数外部声明

票数 0
EN

Stack Overflow用户

发布于 2018-08-16 04:40:08

发现的问题:

这实际上是你可以在小提琴中看到的最后一个函数。我不知道为什么,但由于该函数适用于AlleBilder,它可能会造成一些复杂性。

感谢所有帮助过我们的人!:)

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51864936

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档