El problema es que considera que 1px y 100px son un número, pero el tipo de 1px y 100px es una cadena. Además, no puede usar 1px y 100px para hacer matemáticas.

Además, otro problema que hace que su código no funcione es que está tratando de asignar el ancho al elemento principal de la line (la rain ) y dado que la lluvia no tiene ningún estilo, no funcionará tan bien. Debes aplicar directamente el estilo por line .

 function randomnumber(min, max) { var rn = Math.random() * (max - min) + min; document.querySelector(".line").style.width = rn+'px'; }

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

 <div id=rain onclick="randomnumber('1','100')" > <div class="size"> <div class="line"> </div> </div> </div>

No puede usar como parámetro de una función de javascript un valor css como 100px o algo así como 1rem .

En el div 'lluvia' use este código:

 //... <div id="rain" onclick="randomnumber(1, 100)"> //... </div> //...

• Los parámetros en su función deben ser números enteros para aplicarle aritmética.
• Si está configurando un ancho, debe agregar la unidad como px .
• En su CSS, está configurando el ancho del elemento que tiene la line clase, pero en su JS está cambiando el valor del elemento que tiene la rain de identificación: para cambiar el ancho que ha configurado en css, puede usar el querySelector que se proporciona a continuación .

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

 body { background:#000000; margin: 100px; } .line { height: 5px; width: 50px; background: white; transform: rotate(45deg); }

 <div id="rain" onclick="randomnumber(1,100)"> <div class="size"> <div class="line"> </div> </div> </div>