Creating two new elements using JS

Question

New to JavaScript. This is a flashcard like program and I need to create a new div element and a new img element for each individual img. I've managed to get the correct number of divs but now I'm struggling to get an img element to do under the div. How can I fix the code to get an img under each div? Also how do I append the img without having an id or do I have to have an id? I would really appreciate the help.

for (var i = 0; i < personArray.length; i++) {
  var newDiv = document.createElement('div');
  newDiv.setAttribute('class', 'frame');
  document.getElementById('pic-grid').appendChild(newDiv);
  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);
  document.getElementById('').appendChild(newImg);

}

Here is the JS Bin code.

You don't have to have an ID, you could use querySelector to find any element you want. Although do you not want it to go inside the div you've just created? Or the same parent? — Tyler Roper
– Tyler Roper, Commented Apr 9, 2019 at 0:29

Travis J · Accepted Answer · 2019-04-09 00:29:47Z

1

Using document.getElementById, or any of the element queries, will result in the actual element being returned. So to, using document.createElement also returns an element (of which you used in your code example).

Simply re use the element that you created to append the image with.

newDiv.appendChild(newImg);

answered Apr 9, 2019 at 0:29

Travis J

82.6k43 gold badges213 silver badges280 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

josephting · Accepted Answer · 2019-04-09 00:34:26Z

You want to get the element you want added to HTML ready before appending them into an element.

With that said, you want to:

Create <div> element and modify it to the way you want it to be
Create <img> element and modify it to the way you want it to be
Append #2 (<img>) into element #1 (<div>) by calling newDiv.appendChild(newImg)
Append element #1 (<div>) into HTML document

See example below.

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>

Collectives™ on Stack Overflow

Creating two new elements using JS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related