I have encountered a minor issue with my JS-Script. I attempted to assign each element in an array a unique number, and these numbers were stored in another array. Initially, everything worked perfectly outside of the for-loop.
var i = 0;
document.getElementsByClassName("MosaikBilder")[i].setAttribute("value", BilderListe[i]);
However, once I placed this code snippet inside a for-loop, the entire script became unresponsive. The browser failed to load the script altogether.
var AlleBilder = document.getElementsByClassName("MosaikBilder");
for(i=0; i<AlleBilder.length -1; i++){
document.getElementsByClassName("MosaikBilder")[i].setAttribute("value", BilderListe[i]);
}
To provide more context, here is the corresponding HTML and 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>
The CSS:
title {
display: none;
}
.padding {
width: 100%;
height: 200px;
background-color: red;
margin-top: 20px;
margin-bottom: 20px;
}
.MosaikBilder {
margin: 10px;
float: left;
}
BilderListe is a regular array, filled by the following Javascript function:
function Zahlenzuweisung(){
for(var i=0 ; i<BilderListe.length; i++){
BilderListe[i] = Math.round(Math.random()*1000);
if(BilderListe[i] > 1000){
BilderListe[i] = 1000;
}
}
The array contains 15 randomly generated numbers and appears to be functioning correctly. All operations performed on the array work as intended.
Do you have any insights into why the script fails to execute when the single line of code is placed within the for-loop?
Your assistance would be greatly appreciated. As someone new to this, I am thankful for any help provided :)
EDIT: Here is the Fiddle. It's my first attempt, so there may be some errors present: https://jsfiddle.net/ugdb1423/6/
Note: The concept behind the script is to rearrange the images every time the page is loaded. I initially created a list of random non-repeating numbers. Once this was achieved, I aimed to gather all pictures in a list and assign them one of the random numbers. Following that, I planned to sort the list, remove the pictures, and reinsert them in the new order. To store the assigned random numbers, I chose to use the "value" attribute. While it seems to function outside of the for-loop, it fails inside.