Display images from a chosen array based on radio button selection?

• Arrays

var surffamous = new Array;

surffamous[0] = "teahupoo.jpg"
surffamous[1] = "blacks.jpg"
surffamous[2] = "supertubes.jpg"
surffamous[3] = "pipeline.jpg"

var surfsocal = new Array;

surfsocal[0] = "lajolla.jpg"
surfsocal[1] = "oceanside.jpg"
surfsocal[2] = "delmar.jpg"
surfsocal[3] = "cardiff.jpg"

var surfcentralcal = new Array;

surfcentralcal[0] = "rincon.jpg"
surfcentralcal[1] = "leocarillo.jpg"
surfcentralcal[2] = "elcapitan.jpg"
surfcentralcal[3] = "hollister.jpg"

<form style="color: #2D5059">
<p>Where would you like to explore?</p< <br> <br>
<input type="radio" name="spot" id="socal" value="southern">Southern California
<input type="radio" name="spot" id="central" value="central">Central California
<input type="radio" name="spot" id="famous" value="famous">Famous Spots
</form>

• Javascript

  function check() { for(i=0; i ' + ''); }

      else if(document.getElementById('central').checked) {
  document.write('<img src="'+  surfcentralcal[i] +'"/> ' + '</a>');
      }
  
      else if(document.getElementById('famous').checked) {
  document.write('<img src="'+  surffamous[i] +'"/> ' + '</a>');
      }
  
    }