Javascript : add images in div upon selecting value from select box

我也在尝试在动态创建的 div 中添加图像。当用户创建 go 按钮时，它应该根据在选择框中选择的值在其中创建 div 元素和图像。为了获取图像，我动态创建了 div 标签并创建了图像对象。但在我的代码中图像没有加载到 div 中。谁能帮我解决问题？

CSS

<style>

        body{
        background-image: url("final_images/back.jpg");
    }

    .container{
        /*width: 600px;*/
        /*height: 200px;*/
        border:inset;
        margin-top: 100px;
        margin-left: 300px;
        margin-right: 190px;
        background-color:rgba(255, 234, 134, 0.9);
    }

    #selectBox{
        margin-left:  210px; 
        width: 160px;
    }

    #holder {

        width: 300px;
        height: 300px;
        background-color: #ffffff;
    }

</style>

HTML

<!DOCTYPE html>
<html>
<head>

<title></title>
</head>
<body>

    <div class = 'container' id="main">     
        <form name="myForm">
            <select name="mySelect" id="selectBox">
                <option value="womens">Women's coat</option>
                <option value="mens">Men's coat</option>
                <option value="kids">Kid's toys</option>
                <option value="mixture">Classic mixture</option>
                <option value="earing">Gold Earing</option>
            </select>    
            <INPUT TYPE="button" VALUE="Go" id="go">
        </INPUT>
    </form>
    <HR size="4" color="red" id="hr">

    <!-- <div id="holder">  </div> -->
</div>   
 </body>
  </html>

Javascript

<script>

         imageObj = new Image(128, 128);

         // set image list
         images = new Array();
         images[0]="final_images/wcoat.jpg";
         images[1]="final_images/wcoat.jpg";

        var go = document.getElementById('go');
        go.addEventListener("click", loadItem);

        function loadItem() {

            var mainDiv = document.getElementById("main");

            var btnPre = document.createElement("input");
            //Assign different attributes to the element. 
            btnPre.type = "button";
            btnPre.value = "previous"; 
            btnPre.id = "preBtn";
            mainDiv.appendChild(btnPre);

            newdiv = document.createElement('div');   //create a div
            newdiv.id = 'holder';
            mainDiv.appendChild(newdiv); //add an id   


            var btnNxt = document.createElement("input");
            //Assign different attributes to the element. 
            btnNxt.type = "button";
            btnNxt.value = "next"; 
            btnNxt.id = "nxtBtn";

            mainDiv.appendChild(btnNxt);

            var holder = document.getElementById("holder");

            if(document.getElementById('selectBox').value == "womens"){
                holder.src = images[0] + " Women's coat";
            }  
            else if(document.getElementById('selectBox').value == "mens"){
                holder.src = images[1] + " Men's coat";
            }
        }

        </script>

最佳答案

div 不是图像容器。在 createElement 中替换为 img 可以修复此问题。

另一个大问题是您使用的边距。

我做了一些调整

将 margin-left 替换为 float: right 用于选择
在框上设置左右边距自动。

imageObj = new Image(128, 128);

// set image list
images = new Array();
images[0] = "final_images/wcoat.jpg";
images[1] = "final_images/wcoat.jpg";

var go = document.getElementById('go');
go.addEventListener("click", loadItem);

function loadItem() {

  var mainDiv = document.getElementById("main");

  var btnPre = document.createElement("input");
  //Assign different attributes to the element. 
  btnPre.type = "button";
  btnPre.value = "previous";
  btnPre.id = "preBtn";
  mainDiv.appendChild(btnPre);

  newdiv = document.createElement('img'); //create a div
  newdiv.id = 'holder';
  mainDiv.appendChild(newdiv); //add an id


  var btnNxt = document.createElement("input");
  //Assign different attributes to the element. 
  btnNxt.type = "button";
  btnNxt.value = "next";
  btnNxt.id = "nxtBtn";

  mainDiv.appendChild(btnNxt);

  var holder = document.getElementById("holder");

  if (document.getElementById('selectBox').value == "womens") {
    holder.src = images[0] + " Women's coat";
  } else if (document.getElementById('selectBox').value == "mens") {
    holder.src = images[1] + " Men's coat";
  }
}

body {
  background-image: url("final_images/back.jpg");
}

* {
  box-sizing: border-box;
}

.container {
  width: 400px;
  border: inset;
  margin-top: 100px;
  margin-left: auto;
  margin-right: auto;
  background-color: rgba(255, 234, 134, 0.9);
}

#selectBox {
  float: right;
  width: 160px;
}

#holder {
  width: 300px;
  height: 300px;
  background-color: #ffffff;
}

<div class='container' id="main">
  <form name="myForm">
    <select name="mySelect" id="selectBox">
                <option value="womens">Women's coat</option>
                <option value="mens">Men's coat</option>
                <option value="kids">Kid's toys</option>
                <option value="mixture">Classic mixture</option>
                <option value="earing">Gold Earing</option>
            </select>
    <INPUT TYPE="button" VALUE="Go" id="go">
    </INPUT>
  </form>
  <HR size="4" color="red" id="hr" />

  <!-- <div id="holder">  </div> -->
</div>

关于Javascript : add images in div upon selecting value from select box，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46858903/

Javascript : add images in div upon selecting value from select box

上一篇：javascript - 滚动锁定时滚动的 CSS/JS 动画

下一篇：Python:提取某些类的类中的链接