Javascript error: Can not read property 'length' of null [duplicated]

I'm making an audio player, and every time I upload the page, the background will change, for that I'm using Javascript, although I do not usually program with it.

<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>

the 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>

the script what it does, is to show a random background, with all those images. Ok, this is fine, but I'm telling you to change the background to the label with the class' fondoaudio ', but the div's with whose class there are several, so, I just showed the background a div with the class' fondoaudio ', so that I put it in all the' fondoaudio ', I make a for loop, so that I insert the background in all, the for is going well, but the problem is that it shows me the images in the three div's and not in the four of them. According to Kko_L, it says that it is because document.getElementsByClassName('fondoaudio') gives me null. Well, in summary, theoretically this part of the script:

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

And in the console I get this error:

Uncaught TypeError: Cannot read property 'style' of undefined

I would have to show the funds in the 4 div's show me in the 3 div's. And I do not know where the problem comes from and how to solve it.

Thank you.