Clever Geek Handbook

Display images from selected array based on radio button selection?

  • So, I want to display another array of images for a select button selection using javascript, but cannot get the code to run. A solution using jquery will work as well.

    <script language="javascript">


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>


<script language="javascript">
function check() {
for(i=0; i<4; i++){
if(document.getElementById('socal').checked) {
document.write('<img src="'+  surfsocal[i] +'"/> ' + '</a>');
}
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>');
}
}
</script>
+3


source to share


2 answers


Your code won't run because it throws an error: you don't have enough token }

to close the validation function.

Try this, I made some changes:

#images img {
    margin: 1em;
    width: 100px;
    height: 100px;
}
      

        
        
        
      

    
<form style="color: #2D5059">
    <p>Where would you like to explore?</p>

    <input type="radio" name="spot" id="socal" value="southern">
    <label for="socal">Southern California</label>

    <input type="radio" name="spot" id="central" value="central">
    <label for="central">Central California</label>

    <input type="radio" name="spot" id="famous" value="famous">
    <label for="famous">Famous Spots</label>

</form>
<br>
<div id="images"></div>

<script>
// Find the images div and all of the radio buttons
var images = document.getElementById('images'),
    radioButtons = document.getElementsByName('spot');

// Use [] instead of new Array()
var surffamous = [];
surffamous[0] = "teahupoo.jpg"
surffamous[1] = "blacks.jpg"
surffamous[2] = "supertubes.jpg"
surffamous[3] = "pipeline.jpg"

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

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

function check() {
    var image,
        fragment = document.createDocumentFragment();
    for (var i = 0; i < 4; i++) {
        // Don't use document.write
        image = new Image();

        // 'this' refers to the clicked radio button
        if (this.id === 'socal') {
            image.src = surfsocal[i];
        } else if (this.id === 'central') {
            image.src = surfcentralcal[i];
        } else if (this.id === 'famous') {
            image.src = surffamous[i];
        }
        // The fragment helps you minimize
        // direct DOM insertions
        fragment.appendChild(image);
    }
    images.innerHTML = '';
    images.appendChild(fragment);
}

// Attach a listener to each button, using a loop
for(var i = radioButtons.length; i--;) {
    radioButtons[i].onchange = check;
}
</script>
Run codeHide result




Make sure you add the script tag after the images

div. We mostly avoid document.write

, add a listener onchange

to each radio button and create an image and add it to the div when the radio button is clicked (when it changes).

I also changed a few things, such new Array

as a literal declaration []

and added labels to your radio buttons so that when you click on the text, it looks like you clicked a button.

Hope this works for you. If not, please let me know. Good luck :)

+1


source 


function check(spot) {

    var whichArray;
    if (spot.value == "southern") {
        whichArray = surfsocal;
    }
    else if (spot.value == "central") {
        whichArray = surfcentralcal;
    }
    else if (spot.value == "famous") {
        whichArray = surffamous;
    }
    DisplayImages(whichArray);
}
function DisplayImages(images) {
    for(i=0; i<images.length; i++) {
        document.write('<img src="'+  images[i] +'"/> ');
    }
}

Then add onclicks to the switches



<input type="radio" name="spot" id="socal" value="southern" onclick="check(this);">Southern California
<input type="radio" name="spot" id="central" value="central" onclick="check(this);">Central California
<input type="radio" name="spot" id="famous" value="famous" onclick="check(this);">Famous Spots

Not tested, but should start.

0


source






More articles:


All Articles