estoy haciendo un reproductor de audio, y que cada vez que cargue la pagina, el fondo cambiará, para ello estoy utilizando Javascript, auque no acostumbro ha programar con ello.
<script language='JavaScript'>";
var image = new Array();
image[1]='Postal1.jpg';
image[2]='Portal2.jpg';
image[3]='portal3.jpg';
image[4]='Portal4.jpg';
image[5]='Postal5.jpg';
image[6]='Portal6.jpg';
image[7]='Postal7.jpg';
image[8]='Postal8.jpg';
image[9]='Portal9.jpg';
image[10]='Postal10.jpg';
var src= image[Math.floor(Math.random()*10) + 1];
var fondomp3 = document.getElementsByClassName('fondoaudio');
for(var i = 0; i <= fondomp3.length; i++){
var fondomp31 = document.getElementsByClassName('fondoaudio')[i];
fondomp31.style.backgroundImage = 'url('+src+')';
}
</script>
el HTML:
<div class='fondoaudio'>
<div id='player'>
<div id='songTitle'>Song1.mp3</div>
<div id='buttons'>
<button id='play' class='play_1'><img src='play1.png'/></button>
<button id='pause' class='pause_1'><img src='pause1.png'/></button>
</div>
</div>
</div>
<div class='fondoaudio'>
<div id='player'>
<div id='songTitle'>Song2.mp3</div>
<div id='buttons'>
<button id='play' class='play_2'><img src='play1.png'/></button>
<button id='pause' class='pause_2'><img src='pause1.png'/></button>
</div>
</div>
</div>
<div class='fondoaudio'>
<div id='player'>
<div id='songTitle'>Song3.mp3</div>
<div id='buttons'>
<button id='play' class='play_3'><img src='play1.png'/></button>
<button id='pause' class='pause_3'><img src='pause1.png'/></button>
</div>
</div>
</div>
<div class='fondoaudio'>
<div id='player'>
<div id='songTitle'>Song4.mp3</div>
<div id='buttons'>
<button id='play' class='play_4'><img src='play1.png'/></button>
<button id='pause' class='pause_4'><img src='pause1.png'/></button>
</div>
</div>
</div>
el script lo que hace, es mostrar un fondo aleatoriamente, con todas esas imagenes. Ok, esto va bien, pero yo le estoy diciendo que me cambie el fondo a la etiqueta con el class 'fondoaudio', pero los div's con cuyo class hay varios, así que, solo me mostraba el fondo un div con el class 'fondoaudio', para que me lo ponga en todos los 'fondoaudio', hago un bucle for, para que me inserte el background en todas, el for me va bien, pero el problema es que me muestra las imagenes en los tres div's y no en los cuatro. Según Kko_L, dice que es porque document.getElementsByClassName('fondoaudio')
me da nulo. Bueno, en resumen, teóricamente este parte del script:
for(var i = 0; i <= fondomp3.length; i++){
var fondomp31 = document.getElementsByClassName('fondoaudio');
fondomp31.style.backgroundImage = 'url('+src+')';
}
Y en la consola me sale este error:
Uncaught TypeError: Cannot read property 'style' of undefined
me tendría que mostrar los fondos en los 4 div's me me muestra en los 3 div's. Y no se de donde viene el problema y como solucionarlo.
Gracias.
for
si lo que se trata es de establecer un fondo aleatorio. ¿Acaso el fondo aleatorio no se obtiene ya ensrc
? ¿De qué sirve elfor
? ... En cualquier caso, si necesitaras elfor
, el mismo debería estar basado en el tamaño del array, no en el tamaño defondomp3
, que no es otra cosa que la referencia a un elemento del DOM. El bucle debería ser así:for(var i = 0; i < image.length; i++){