使用 javascript 创建元素 img答案

【问题标题】：createElement img with javascript使用 javascript 创建元素 img
【发布时间】：2016-01-07 00:40:56
【问题描述】：

它在浏览器上没有显示任何图像，我想知道它在创建图像时哪里出错了？我创建了一个变量imgFace，其中i 存储图像并为其创建正确的属性，但它似乎没有显示任何内容。

这是我的代码：

var numberOfFaces = 5;
var theLeftSide = document.getElementById("LeftSide");

function generateFaces() {
  var count = 0;
  while (count <= numberOfFaces) {
    var imgFace = document.createElement("img");
    img.src = "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png";
    var random_nr = Math.random() * 400;
    random_nr = Math.floor(random_nr);
    imgFace.style.top = random_nr + "px";
    imgFace.style.left = random_nr + "px";
    theLeftSide.appendChild(imgFace);
    count++;

  }
}

img {
  position: absolute;
}

div {
  position: absolute;
  width: 500px;
  height: 500px;
}

#RightSide {
  left: 500px;
  border-left: 1px solid black
}

<body onload="generateFaces()">
  <h1>Matching Game</h1>
  <p>Click on the extra smiling face on the left</p>
  <div id="LeftSide">
  </div>
  <div id="RightSide">
  </div>
</body>

【问题讨论】：

Sebastian 建议，img.src="http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png"; 应该是 imgFace.src="http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png";
仍然无法正常工作。

标签： javascript image createelement

【解决方案1】：

function generateFaces() {
        var count = 0;
        while(count <= numberOfFaces){
            var imgFace = document.createElement("img");
            imgFace.src="http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png";
            var random_nr = Math.random() * 400;
            random_nr = Math.floor(random_nr);
            imgFace.style.top = random_nr + "px";
            imgFace.style.left = random_nr + "px";
            theLeftSide.appendChild(imgFace);
            count++;

        }
    }

【讨论】：

【解决方案2】：

替换这一行

img.src="http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png";

与

imgFace.src="http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png";

注意：img 不是您定义的正确变量名。应该是imgFace。

【讨论】：

【解决方案3】：

两件事，

你有img.src，应该是imgFace.src。
您没有调用您的 generateFaces 函数。

var numberOfFaces = 5;
var theLeftSide = document.getElementById("LeftSide");

function generateFaces() {
  var count = 0;
  while (count <= numberOfFaces) {
    var imgFace = document.createElement("img");
    imgFace.src = "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png";
    var random_nr = Math.random() * 400;
    random_nr = Math.floor(random_nr);
    imgFace.style.top = random_nr + "px";
    imgFace.style.left = random_nr + "px";
    theLeftSide.appendChild(imgFace);
    count++;

  }
}

generateFaces();

img {
  position: absolute;
}

div {
  position: absolute;
  width: 500px;
  height: 500px;
}

#RightSide {
  left: 500px;
  border-left: 1px solid black
}

<h1>Matching Game</h1>
<p>Click on the extra smiling face on the left</p>
<div id="LeftSide">
</div>
<div id="RightSide">
</div>

External example

【讨论】：

generateFaces onload 调用：<body onload="generateFaces()">。