javascript - 根据输入字段值回显图像？

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);
}

见演示。