根据输入场值回波图像？

Question

拥有以下代码

function SetImageProperties(control)
{
    // Populate hidden fields with properties of the control
    document.getElementById("ImageName").value   = control.name;
    document.getElementById("ImageSource").value = control.src;
}


 <form>
 <div id="dhtmlgoodies_slideshow">
    <div id="galleryContainer">
    <div id="arrow_left"><img src="images/arrow_left.gif"></div>
    <div id="arrow_right"><img src="images/arrow_right.gif"></div>
    <div id="theImages">
        <img src="http://www.fastflowers.com.au/Skin/FastFlowers/Images/Products/210,210/Australiana.jpg" name="image1.jpg" onclick="SetImageProperties(this)"/></a>
        <div id="slideEnd"></div>
    </div>
</div>
</div><input type="text" value="" id="ImageName" name="ImageName"/>
<input type="text" value="" id="ImageSource" name="ImageSource"/></form>

将图像src和图像名称输入到输入字段中。在“ImageSource”中获取图像的src。再次如何使用“ImageSource”显示图像？根据输入字段的手段想要再次回显图像。

Answer 1

添加一个存储结果的新<div id="selectedImage">。然后根据输入创建一个<img>元素并附加结果。

function SetImageProperties(control)
{
    // Populate hidden fields with properties of the control
    document.getElementById("ImageName").value   = control.name;
    document.getElementById("ImageSource").value = control.src;
    // Create new image
    var img = document.createElement("img");
    img.src = control.src;
    img.setAttribute("name", control.name);
    // Output results
    var target = document.getElementById("selectedImage");
    target.innerHTML = "You selected the image:<br/>";
    target.appendChild(img);
}

请参阅DEMO。