I have a HTML and I’m trying to randomize each layer top margin attribute.
function randomize() {
let r;
let list = document.querySelectorAll("span");
for (let i = 0; i < list.length; i++) {
r = Math.floor(Math.random() * 50);
list.forEach((list) => {
style.top = `${r} + px`;
});
}
}span {
position: absolute;
height: 20px;
width: 20px;
border-radius: 100%;
z-index: -2;
}<div class="parallax">
<span class="layer" data-speed="-5">10110</span>
<span class="layer" data-speed="-5">0</span>
</div>What am I getting wrong here? I can’t find the proper solution.
>Solution :
A few things:
- To use the
topCSS property, the element needs to have a position defined. You can set that in the CSS (position: relative) or set it in the JS. - You need to move the randomization into the
forEachotherwise it will have the same value for allspanelements - You need to attach the
styleprop to the element you are passing in theforEach, e.g.,list.style.styleProp
function randomize() {
let r;
let list = document.querySelectorAll("span");
for (let i = 0; i < list.length; i++) {
list.forEach((list) => {
r = Math.floor(Math.random() * 50);
list.style.top = r + 'px';
});
}
}
randomize();span {
position: absolute;
height: 20px;
width: 20px;
border-radius: 100%;
z-index: -2;
}<div class="parallax">
<span class="layer" data-speed="-5">10110</span>
<span class="layer" data-speed="-5">0</span>
</div>