Why the randomize function for absolute margin is not working?

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:

  1. To use the top CSS property, the element needs to have a position defined. You can set that in the CSS (position: relative) or set it in the JS.
  2. You need to move the randomization into the forEach otherwise it will have the same value for all span elements
  3. You need to attach the style prop to the element you are passing in the forEach, 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>

Leave a Reply