Question

您好我正在尝试输出图像，我之前的方法是这样的：

<select name="code" id="code" size="">
        <option value="">imgA</option>
        <option value="">imgB</option>
        <option value="">imgC</option>
        <option value="">imgD</option>
</select>
<input type="button" onclick="showimg()" value="Display">
<img src="placeholder.png" id="placeholderImg" style="display: none;" />

function showimg() {
    var q = document.getElementById("code");
    var selected = q.options[q.selectedIndex].value;

    var src = "http://www.unc.edu/~matusiak/imgs/Under-Construction-1.gif";
    var img = document.getElementById("placeholderImg");
    img.src = src;
    img.style.display = "inline";
}

它的作用是每次用户改变他/她的选项时图像也会改变，我猜想工作正常，但目前我正在尝试做这样的事情，

细说：

输入（标签/ textarea）：ImageA.jpg 按钮：点击我

所需输出：图像弹出

期望的流程：

不再选择选项<select name=""><opt...</select>，当按钮单击时，它将从“img2 /”+ selected +“.jpg”中搜索;这是本地的

或者如果<select name=""><opt...</select>无法删除，请更改为更多变量，因为在当前设置中它会在控制台中提示错误，这就是为什么我在寻找更有效的方法

thnx所有帮助表示赞赏

的更新 的

function addTheImage() 
{     var img = document.createElement('img');
     img.src = "http://....";   
  document.body.appendChild(img); 
}

Answer 1

<html>
<head>

<script type="text/javascript">

function addimage() { 
      selected =  document.getElementById("country").value;
      var src = "img2/" + selected + ".jpg";
      var img = document.createElement("img");
      img.src = src; 
      container.appendChild(img);
      img.style.display = "inline";
    }

</script>

<body>
  <input class="buildaddress" id="country">
  <input type="button" onclick="addimage()" value="Display">
  <div id="container"></div>

</body>

得到了我的答案，其他人发布给其他人，可能有同样的问题，也询问你如何将其限制为一个appendChild的意见，导致其无限

JS：调用图像的更有效方法

1 个答案: