Question 235844 in Html Question posted in
Some basic documentation can be found here.

Html – Looping through an array and printing elements to the DOM

I’m having trouble accessing an array, and looping through the array then printing the elements inside the array to the DOM. For some reason, it just print’s only "Relish" and it doesn’t print the two other elements inside the array "Ketchup" and "Mustard". Is there anyway I can get a hint on how to accomplish this task?

Here is my code bellow.

let topingsCount;
const burger = document.createElement('div');
const topingsDiv = document.createElement('div');
const condiments = ['Ketchup', 'Mustard', 'Relish']
const condimentsNewDiv = document.createElement('div');

function createBuger(condiments){
    burger.className = 'burger';
    burger.appendChild(topingsDiv)
    topingsDiv.className = "topings";
    condimentsNewDiv.className = "condiments";
    topingsDiv.appendChild(condimentsNewDiv)
    for(let topingsCount = 0; topingsCount != condiments.length ; topingsCount++){
        topingsDiv.appendChild(condimentsNewDiv).textContent = condiments[topingsCount];
        console.log(condimentsNewDiv);
    }

    console.log(burger);
    document.body.appendChild(burger)


}
createBuger(condiments);

I tried a console.log(condimentsNewDiv); inside the for loop so, I can print out each condiment. But it only printed out relish <div class="condiments">Relish</div> 3X times. I was expecting for it to print out:

<div class="condiments">Ketchup</div>
<div class="condiments">Mustard</div>
<div class="condiments">Relish</div>
Tags:

2

Answers


  1. 0

    It looks like you are using condimentsNewDiv every time rather than creating a new div for each condiment. This will reuse the same element reference over and over for each condiment, which means it’s likely just overwriting the textContent each time.

    Try doing something like this instead:

    let topingsCount;
const burger = document.createElement('div');
const topingsDiv = document.createElement('div');
const condiments = ['Ketchup', 'Mustard', 'Relish']

function createBuger(condimentsList){
    burger.className = 'burger';
    topingsDiv.className = "topings";
    for(let topingsCount = 0; topingsCount != condimentsList.length ; topingsCount++){
        const condimentsNewDiv = document.createElement('div');
        condimentsNewDiv.className = "condiments";
        topingsDiv.appendChild(condimentsNewDiv).textContent = condimentsList[topingsCount];
        console.log(condimentsNewDiv);
    }

     burger.appendChild(topingsDiv)

    console.log(burger);
    document.body.appendChild(burger)


}
createBuger(condiments);

    Notice here we are creating a new div for each condiment rather than reusing the same one over and over.

    Login or Signup to reply.
  2. 0

    Here is the working example:

    let _id = (id) => document.querySelector(`#${id}`);

let data = [{
  id : 1,
  name : "abc",
},
{
  id : 2,
  name : "some",
}];

function template(array) {
  let htmlStr = ``;
  for(let elem of array){
    //creating html template to view 
    htmlStr += `
      <div>
        <h2 id=${elem.id}>${elem.name}</h2>
      </div>
    `;
  }
  return htmlStr;
}
//window when load
window.onload = () => _id("demo").innerHTML = template(data);

let addElem = () => {
  const randomId = Math.floor(Math.random() * 100);
 //data updated
  data.push({
    id : randomId,
    name : `newest element ${randomId}`
  });
 
  //update the html-DOM by recreating the template
   _id("demo").innerHTML = template(data);
}
    <button onclick="addElem()">add one more element</button>

<div id="demo"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search