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 >
  <span  data-speed="-5">10110</span>
  <span  data-speed="-5">0</span>
</div>

What am I getting wrong here? I can't find the proper solution.

CodePudding user response：

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. (EDIT OP added CSS that they had already which set the position. Leaving this here for people that use top without setting an element's position)
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 >
  <span  data-speed="-5">10110</span>
  <span  data-speed="-5">0</span>
</div>

CodePudding user response：

Because <span> is natively an inline element, and margin has no effect.

Change your <span>s to <div>s.