Question

我正在尝试在动态创建的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>

Answer 1

您需要使用图片代码而不是div。您也可以使用CSS加载图像，但这可能不是您想要的。

从这一行开始：

var holder = document.getElementById（＆＃34; holder＆＃34;）;

  var image = new Image(128, 128);


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

Answer 2

div不是图像容器。替换为img修复此内容中的createElement。

另一个大问题是您使用的保证金。

我做了一些调整

将margin-left替换为选择

float: right

将左边和右边的边距自动设置在方框上。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

让我详细说明一下。在JavaScript代码中，您在这里创建一个div元素

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

然后您正在搜索ID为持有人的元素并设置新的图片网址。

var holder = document.getElementById("holder");
// holder is <div></div> element
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";
}

持有人现在是div标签。它没有src属性

但div元素没有名称 src 的属性。所以上面的代码只会为你的div标签添加一个属性。但浏览器不会解释它。

因此，如果您想通过设置 src 属性来加载图片，那么您可能需要将持有人创建为 img 标记，该标记具有属性 src 。像这样。

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

持有人是一个img标签。现在它有src属性

现在它可以正常工作。

Javascript：从选择框中选择值时，在div中添加图像

3 个答案: