Question

JavaScript的新手。这是一个类似于程序的抽认卡，我需要为每个单独的img创建一个新的div元素和一个新的img元素。我已经设法获得正确的div数量，但是现在我正在努力使img元素在div下执行。如何修复代码以在每个div下获取img？另外，如何在没有ID的情况下附加img或必须具有ID？我真的很感谢您的帮助。

params: { :user => { :password => "passw0rd" } }

这是JS Bin代码。

Answer 1

使用document.getElementById或任何元素查询将导致返回实际元素。因此，使用document.createElement还会返回一个元素（在代码示例中使用了该元素）。

只需重新使用您创建的用于附加图像的元素即可。

newDiv.appendChild(newImg);

Answer 2

在将元素添加到元素之前，您需要准备好要添加到HTML的元素。

话虽如此，您想：

创建<div>元素并将其修改为所需的样式
创建<img>元素并将其修改为所需的样式
调用<img>，将＃2（<div>）附加到元素＃1（newDiv.appendChild(newImg)）中
将元素＃1（<div>）附加到HTML文档中

请参见下面的示例。

var currentId = "";
var x = 0;
var y = 0;

var personArray = [
  {
    firstname: "Ann",
    url:
      "http://www.tuktukdesign.com/wp-content/uploads/2017/12/person-icon.jpg"
  },
  {
    firstname: "Jane",
    url:
      "http://www.tuktukdesign.com/wp-content/uploads/2017/12/person-icon.jpg"
  },
  {
    firstname: "John",
    url:
      "http://www.tuktukdesign.com/wp-content/uploads/2017/12/person-icon.jpg"
  },
  {
    firstname: "Joe",
    url:
      "http://www.tuktukdesign.com/wp-content/uploads/2017/12/person-icon.jpg"
  }
];

function populateImages() {
  for (var i = 0; i < personArray.length; i++) {
    var newDiv = document.createElement("div");
    newDiv.setAttribute("class", "frame");
    var newImg = document.createElement("img");
    newImg.setAttribute("src", personArray[i].url);
    newImg.setAttribute("onclick", "promptForName(this)");
    newImg.setAttribute("onmouseover", "styleIt(this)");
    newImg.setAttribute("onmouseout", "unStyleIt(this)");
    newImg.setAttribute("id", personArray[i].firstname);
    newDiv.appendChild(newImg);
    document.getElementById("pic-grid").appendChild(newDiv);
  }
}

function promptForName(element) {
  document.getElementById("response").value = "";
  document.getElementById("message").innerHTML = "";
  document.getElementById("prompt").style.display = "block";
  currentId = element.id;
  x = element.offsetLeft;
  y = element.offsetTop;
  x = x + 20;
  y = y + 20;
  document.getElementById("prompt").style.position = "absolute";
  document.getElementById("prompt").style.top = y;
  document.getElementById("prompt").style.left = x;
  document.getElementById("response").focus();
}

function styleIt(element) {
  element.parentNode.style.backgroundColor = "aqua";
}

function unStyleIt(element) {
  element.parentNode.style.backgroundColor = "white";
}

function checkAnswer() {
  if (
    document.getElementById("response").value ==
    personArray[currentId].firstname
  ) {
    document.getElementById(currentId).className = "opClass";
    document.getElementById(currentId).removeAttribute("onclick");
    document.getElementById(currentId).removeAttribute("onmouseover");

    var divVar = document.createElement("div");
    divVar.setAttribute("id", currentId + "name");
    document.getElementById("pic-grid").appendChild(divVar);
    var textNode = document.createTextNode(personArray[currentId].firstname);
    divVar.appendChild(textNode);
    document.getElementById(currentId + "name").style.position = "absolute";
    document.getElementById(currentId + "name").style.top = y;
    document.getElementById(currentId + "name").style.left = x;

    document.getElementById("prompt").style.display = "none";
    document.getElementById(currentId).parentNode.style.backgroundColor =
      "white";
    document.getElementById("response").value = "";
    document.getElementById("message").innerHTML = "";
  } else {
    if (document.getElementById("message").innerHTML == "Wrong!") {
      document.getElementById("message").innerHTML = "Incorrect answer!";
    } else {
      document.getElementById("message").innerHTML = "Wrong!";
    }
  }
  return false;
}

body,
header {
  text-align: center;
  font-family: arial;
  font-size: 1em;
  background-color: silver;
}

.frame {
  padding: 25px;
  background-color: white;
  border: solid 1px black;
  display: inline-block;
}

#prompt {
  background-color: aqua;
  padding: 10px;
  display: none;
}

img {
  cursor: pointer;
}

.opClass {
  opacity: 0.4;
  filter: alpha(opacity=40);
  /* For IE8 and earlier */
  cursor: default;
}

<body onload="populateImages()">
	<header>
		<h2>Class Flashcards</h2>
		<h3>Click on a student to guess their name</h3>
	</header>

	<div id="pic-grid">

	</div>

	<div id="prompt">
		What is this student's name?<br />
		<form onsubmit="return checkAnswer()">
			<input type="text" id="response" name="quizInput">
		</form>
		<div id="message"></div>
	</div>
</body>

使用JS创建两个新元素

2 个答案: