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

如果声明显示图像

1 个答案: