1

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.

1
  • 1
    La verdad es que tu pregunta no se entiende bien. No sé por qué usas un bucle for si lo que se trata es de establecer un fondo aleatorio. ¿Acaso el fondo aleatorio no se obtiene ya en src? ¿De qué sirve el for? ... En cualquier caso, si necesitaras el for, el mismo debería estar basado en el tamaño del array, no en el tamaño de fondomp3, 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++){
    – A. Cedano
    Commented el 25 nov. 2018 a las 15:03

3 respuestas 3

1

Esto pasa porque "main" al ser una ID que solo puede existir una vez, todas las demás se descartar seguramente que te coge el primer main y es al cual se le aplica la imagen, para arreglar esto lo mejor es usar una class en vez de una id ya que las clases son re-utilizables es decir puedes usarlas en mas de 1 div

Diria que esto seria una buena salida.

var src= image[Math.floor(Math.random()*10) + 1];
var fondomp3 = document.getElementsByClassName("main");
for (var i = 0; i < fondomp3.length; i++) {
    fondomp3[i].style.backgroundImage = 'url('+src+')';
}
2
  • Hola, he quitado el bucle for y en la variable fondomp3, he colocado 'document.getElementsByClassName('fondoaudio');' (cambie el class) y me sale este error: Uncaught TypeError: Cannot set property 'backgroundImage' of undefined, lo que no se es porque me sale esto, como solucionarlo. Gracias
    – cleanet
    Commented el 26 nov. 2018 a las 8:58
  • 1
    El error es muy claro: al hacer document.getElementsByClassName('fondoaudio'); no estás obteniendo ningún elemento. De ahí ese "undefined". Por favor, edita tu pregunta y pon el HTML y así será más fácil ayudarte.
    – Kiko_L
    Commented el 26 nov. 2018 a las 9:31
1

Comprueba que haya algun elemento HTML con el atributo ID="main" . Si no existe ningun elemento HTML con ese ID, fondomp3 siempre sera NULL.

1

El problema es que tienes un <= en el for:

for(var i = 0; i <= fondomp3.length; i++){
  var fondomp31 = document.getElementsByClassName('fondoaudio');
  fondomp31.style.backgroundImage = 'url('+src+')';
}

fondomp3 tiene 4 elementos pero los array en javascript son z-based por lo que el elemento fondomp3[4] no existe. De ahí que fondomp31 en esa iteración sea undefined

Cambia ese <= por < y solucionado:

for(var i = 0; i < fondomp3.length; i++){
      var fondomp31 = document.getElementsByClassName('fondoaudio');
      fondomp31.style.backgroundImage = 'url('+src+')';
    }

Te dejo el código con esos cambios y alguno más:

let image = ['https://images.vexels.com/media/users/3/134987/isolated/lists/2f7ac9861a2050983694bb9c7f1859c1-centro-de-llamada-con-el-fondo.png', 
'https://images.vexels.com/media/users/3/135149/isolated/lists/f7da46129f048eafb4bb8d23b14b00af-se-al-de-mensaje-con-el-fondo.png',
'http://4.bp.blogspot.com/-AhxMERr_smw/T6SuJ3itbuI/AAAAAAAAQFg/jsa92CJkEFI/s1600/eye.png',
'https://www.aprendemarketingonline.com/wp-content/uploads/2017/05/facebook-circular-logo-icono-azul-18a1c7-fondo-transparente.png',
'https://images.vexels.com/media/users/3/152381/isolated/lists/eb07cb8fa6347f036a28a1ffb3ef77a0-fondo-de-ilustraci-n-de-confeti.png',
'https://pngimage.net/wp-content/uploads/2018/06/logo-instagram-sin-fondo-png-3.png',
'https://www.aprendemarketingonline.com/wp-content/uploads/2017/05/graduation-student-black-cap-icono-azul-18a1c7-fondo-transparente.png',
'https://2.bp.blogspot.com/-tDx8uPae-rk/T4fg0bkl2RI/AAAAAAAANPo/wvWKjSV4kqE/s1600/heart.png',
'https://www.ineaf.es/tribuna/wp-content/uploads/Fondo-de-Comercio-Tribuna-INEAF.png',
'https://www.aprendemarketingonline.com/wp-content/uploads/2017/05/graduation-student-black-cap-icono-azul-18a1c7-fondo-transparente.png']

let src= image[Math.floor(Math.random()*10) + 1];
let fondomp3 = document.getElementsByClassName('fondoaudio');
  for(let i = 0; i < fondomp3.length; i++){
    let fondomp31 = document.getElementsByClassName('fondoaudio')[i];
    fondomp31.style.backgroundImage = 'url('+src+')';
}
<div class='fondoaudio'>
   <div id='player'>
      <div id='songTitle'>Song1.mp3</div>
      <div id='buttons'>
         <button id='play' class='play_1'><img src='https://cdn3.iconfinder.com/data/icons/developperss/PNG/Play%20Green%20Button.png'/></button>
         <button id='pause' class='pause_1'><img src='https://cdn3.iconfinder.com/data/icons/developperss/PNG/Pause%20Green%20Button.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='https://cdn3.iconfinder.com/data/icons/developperss/PNG/Play%20Green%20Button.png'/></button>
         <button id='pause' class='pause_2'><img src='https://cdn3.iconfinder.com/data/icons/developperss/PNG/Pause%20Green%20Button.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='https://cdn3.iconfinder.com/data/icons/developperss/PNG/Play%20Green%20Button.png'/></button>
         <button id='pause' class='pause_3'><img src='https://cdn3.iconfinder.com/data/icons/developperss/PNG/Pause%20Green%20Button.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='https://cdn3.iconfinder.com/data/icons/developperss/PNG/Play%20Green%20Button.png'/></button>
         <button id='pause' class='pause_4'><img src='https://cdn3.iconfinder.com/data/icons/developperss/PNG/Pause%20Green%20Button.png'/></button>
      </div>
   </div>
</div>

2
  • Hola, he hecho lo que mw ha dicho y no lo he podido solucionar, hay el mismo erro. Ademas si dice que el fondoaudio[4] no existe, como puedo hacerlo para que aparezca los fondos en los 4 div's. Y que es z-based en un array de javascript?
    – cleanet
    Commented el 27 nov. 2018 a las 14:06
  • Significa que el primer índice de los arrays es 0 en vez de 1. Vas a tener un array con las posiciones 0, 1, 2 y 3 (con lo que tienes 4 elementos). Si haces fondoaudio[4] estás accediendo a una posición del array que no existe. ¿Estás seguro de que sale el mismo error? Porque ya ves que con tu mismo código a mí no me sale el error.
    – Kiko_L
    Commented el 27 nov. 2018 a las 14:33

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.