javascript - If 语句显示图像

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>

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