Why the randomize function for absolute margin is not working?

user_17111090 0
Viewed 38

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.

random function javascript
2 Answers

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

user_11721890

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

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

user_43783140
Related