Trying to randomize the padding of an element to create a small rain effect-CodePudding

I am trying to randomize the position of diagonal falling lines using padding. Whenever I try to use the below code the lines do not change. However, if I add style:padding-left:300px to the style of the rain and remove my JavaScript I can move the element to the right by 300px. I can theoretically do this and map out each line however I would like to know how to randomize the padding, preferably dynamically and not just onpageload

<script>
function randomnumber(min, max) {
  var rn = Math.random() * (max - min)   min;
  document.querySelector('#rain .line').style.padding = rn 'px';
}

</script>

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

<style>   
body{
   background:#000000;
   margin: 100px; 
}

.line {
 height: 1px;
 width: 40px;
 background: white;
 transform: rotate(45deg);
}

.rainsize{
height:100%;
width:100%;
opacity:0%;
z-index:1000;
position:fixed;
width:100%;
top:0px;
left:0px;
}

.move{
position:relative; 
animation-name: moverain;
animation-duration: 3s;
animation-iteration-count: infinite;
}
@keyframes moverain {
0%{top:0px;left:0px;}
100%{top:1000px;left:1000px;}
}

</style>


<div onpageload="randomnumber('10','1000')"></div>


<div id=rain >
  <div "></div> 
</div>

<div id=rain >
  <div "></div> 
</div>

<div id=rain >
  <div "></div> 
</div>

<div id=rain >
  <div "></div> 
</div>

<div id=rain >
  <div "></div> 
</div>

<div id=rain >
  <div "></div> 
</div>

<div id=rain >
  <div "></div> 
</div>

<div id=rain >
  <div "></div> 
</div>

CodePudding user response：

You could do something like:

function randomnumber(min, max) {
    return Math.round(Math.random() * (max - min)   min);
}

document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.line').forEach(value => value.style.padding = randomnumber(1, 10)   'px');
}, false);