CODEWITHSUNDEEP
javascriptimagefunctionif-statement
Niamh McKenna
Niamh McKenna

Reputation: 13

If Statement to display image

I'm having a problem with my code. I have a set of options which, depending on which one the user picks, should generate a different image for each one.

Here is what I have in my body - the select menu and an empty div waiting to be filled when the function is called.

<form>
<select name="choice" id="choice" size="3" onchange="createDoll(this.value)">
<option value="0">Vintage</option>
<option value="1">Plaid</option>
<option value="2">Skater</option>
<option value="3">Maxi</option>
</select>
</form>

<div id="display_here">
</div>

My Javascript contains this:

function createDoll(userChoice)
{
    // clear the div where result is displayed
document.getElementById("display_here").innerHTML = "";

// defined names
var choices = new Array("Vintage", "Plaid", "Skater", "Maxi");


// output sentence
var sentence = "<p>You picked a " + choices[userChoice] + " doll.</p>"



if ( (userChoice == 0) || (userChoice == 1))
{
    // create a sentence
    // display image    
    document.getElementById("display_here").innerHTML = sentence + "image goes here";

Where the text 'image goes here' is held, I want the image to be displayed but cannot figure out how to do this. I have tried image tags and making the images a variable but nothing will work. Any ideas?

Upvotes: 0

Views: 13237

Answers (1)

akinuri
akinuri

Reputation: 12027

Try this.

<select name="choice" id="choice" size="3" onchange="createDoll(this.value)">
    <option value="0">Vintage</option>
    <option value="1">Plaid</option>
    <option value="2">Skater</option>
    <option value="3">Maxi</option>
</select>
<div id="display_here"></div>

 

function createDoll(userChoice) {
    var output = document.getElementById("display_here");
    output.innerHTML = "";

    var links = [
        "http://www.dreamomania.info/dreamdictionary/wp-content/uploads/2013/02/V.jpg",
        "http://i452.photobucket.com/albums/qq248/lostvegasvip/Burning-letter-P-psd26647.png",
        "http://www.arro-signs.co.uk/red-letter-s.jpg",
        "http://colleenmorrow.com/wp-content/uploads/2011/09/the-letter-m.png"
    ];

    var choices = ["Vintage", "Plaid", "Skater", "Maxi"];
    var sentence = "<p>You picked a " + choices[userChoice] + " doll.</p>"
    var img = '<img src="' + links[userChoice] + '">';

    output.innerHTML = sentence + img;
}

Working Example

Upvotes: 2

Related Questions