Soy relativamente nuevo en JS, por lo que podría ser descaradamente obvio, así que me disculpo.
He escrito una pequeña función que genera un código hexadecimal aleatorio para aplicarlo a una clase html, pero simplemente no se inicializa.
<!DOCTYPE html> </head> <body onload="get_random_color()"> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mollis.</p> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mollis.</p> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mollis.</p> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mollis.</p> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mollis.</p> <script language="javascript"> var rand = document.getElementsByClassName("para"); function get_random_color(){ var letters ='0123456789ABCDEF'.split(''); var color = '#'; for (var i = 0; i < 6; i++) { color += letters[Math.round(Math.random() * 15 )]; } return color; rand.style.backgroundColor = get_random_color(); } </script> </body>Cualquier idea o ayuda sería muy apreciada, gracias
j
Tienes muchos problemas con el código.
body onload llama a get_random_color , que genera correctamente el color , pero luego tienes un return que evita que se asigne al estilo en la siguiente línea.rand no se le asigna un elemento sino una colección de elementos. Consulte la documentación de getElementsByClassName . Incluso si su return no estuviera allí, la colección no tiene una propiedad de estilo. Tienes que establecer el estilo en cada elemento usando un bucle for .get_random_color , el rand.style.backgroundColor = get_random_color(); se llama a sí mismo: si return no estuviera allí, obtendría un desbordamiento de pila porque el método se llamaría a sí mismo una y otra vez.rand tiene un nombre incorrecto: deberían ser paragraphs o algo así.Reúna los párrafos por clase usando querySelectorAll , itere sobre ellos y aplique un nuevo color a cada uno llamando a la función.
const paras = document.querySelectorAll('.para'); paras.forEach(para => para.style.color = get_random_color()); function get_random_color() { var letters = '0123456789ABCDEF'.split(''); var color = '#'; for (var i = 0; i < 6; i++) { color += letters[Math.round(Math.random() * 15)]; } return color; } <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mollis.</p> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mollis.</p> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mollis.</p> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mollis.</p> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mollis.</p>