Если заявление для отображения изображения

Question

У меня проблема с моим кодом. У меня есть набор опций, которые, в зависимости от того, какой пользователь выбирает, должны генерировать другое изображение для каждого из них.

Вот что я имею в своем теле - меню выбора и пустой div, ожидающий заполнения, когда функция вызывается.

<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 содержит это:

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

Где текст «изображение идет здесь» проходит, я хочу, чтобы изображение, которое будет отображаться, но не может понять, как это сделать. Я пробовал теги изображений и делал изображения переменной, но ничего не получилось. Есть идеи?

Answer 1

Попробуйте это.

<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