Iterating over an array and displaying elements on the webpage

Question

Iterating over an array and displaying elements on the webpage

Struggling to access an array and loop through it, but only able to print out one element instead of all. Need a hint on how to solve this issue.

See my code below:

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

function createBurger(condiments){
    burger.className = 'burger';
    burger.appendChild(toppingsDiv)
    toppingsDiv.className = "toppings";
    condimentsNewDiv.className = "condiments";
    toppingsDiv.appendChild(condimentsNewDiv)
    for(let toppingsCount = 0; toppingsCount != condiments.length ; toppingsCount++){
        toppingsDiv.appendChild(condimentsNewDiv).textContent = condiments[toppingsCount];
        console.log(condimentsNewDiv);
    }

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


}
createBurger(condiments);

Inserted a console.log(condimentsNewDiv); inside the loop to check each condiment. However, it repeated "Relish" 3 times instead of printing out all three elements as expected:

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

javascript html css dom css-selectors

Answer 1

Answer №1

It appears that you may be relying on the condimentsNewDiv element repeatedly instead of generating a fresh div for each condiment. By doing so, you are essentially replacing the textContent with each iteration.

To address this issue, consider implementing the following approach:

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

function createBurger(condimentsList){
    burger.className = 'burger';
    toppingsDiv.className = "toppings";
    
    for(let toppingsCount = 0; toppingsCount != condimentsList.length ; toppingsCount++){
        const condimentsNewDiv = document.createElement('div');
        condimentsNewDiv.className = "condiments";
        
        toppingsDiv.appendChild(condimentsNewDiv).textContent = condimentsList[toppingsCount];
        console.log(condimentsNewDiv);
    }

     burger.appendChild(toppingsDiv);

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


}
createBurger(condiments);

By creating a distinct div for each condiment, we avoid reusing the same element unnecessarily.

Answer 2

It appears that you may be relying on the condimentsNewDiv element repeatedly instead of generating a fresh div for each condiment. By doing so, you are essentially replacing the textContent with each iteration.

To address this issue, consider implementing the following approach:

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

function createBurger(condimentsList){
    burger.className = 'burger';
    toppingsDiv.className = "toppings";
    
    for(let toppingsCount = 0; toppingsCount != condimentsList.length ; toppingsCount++){
        const condimentsNewDiv = document.createElement('div');
        condimentsNewDiv.className = "condiments";
        
        toppingsDiv.appendChild(condimentsNewDiv).textContent = condimentsList[toppingsCount];
        console.log(condimentsNewDiv);
    }

     burger.appendChild(toppingsDiv);

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


}
createBurger(condiments);

By creating a distinct div for each condiment, we avoid reusing the same element unnecessarily.

Answer 3

Answer №2

Check out this functional demo:

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

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

function generateTemplate(array) {
  let htmlString = ``;
  for(let item of array){
    //creating dynamic html template 
    htmlString += `
      <div>
        <h2 id=${item.id}>${item.name}</h2>
      </div>
    `;
  }
  return htmlString;
}
//trigger when page loads
window.onload = () => findElementById("demo").innerHTML = generateTemplate(dataStorage);

let addNewElement = () => {
  const generatedId = Math.floor(Math.random() * 100);
 //add new data entry
  dataStorage.push({
    id : generatedId,
    name : `newest element ${generatedId}`
  });
 
  //update the DOM by recreating the template
   findElementById("demo").innerHTML = generateTemplate(dataStorage);
}

<button onclick="addNewElement()">Add one more element</button>;

<div id="demo"></div>

Answer 4

Check out this functional demo:

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

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

function generateTemplate(array) {
  let htmlString = ``;
  for(let item of array){
    //creating dynamic html template 
    htmlString += `
      <div>
        <h2 id=${item.id}>${item.name}</h2>
      </div>
    `;
  }
  return htmlString;
}
//trigger when page loads
window.onload = () => findElementById("demo").innerHTML = generateTemplate(dataStorage);

let addNewElement = () => {
  const generatedId = Math.floor(Math.random() * 100);
 //add new data entry
  dataStorage.push({
    id : generatedId,
    name : `newest element ${generatedId}`
  });
 
  //update the DOM by recreating the template
   findElementById("demo").innerHTML = generateTemplate(dataStorage);
}

<button onclick="addNewElement()">Add one more element</button>;

<div id="demo"></div>

Iterating over an array and displaying elements on the webpage

Answer №1

Answer №2

Similar questions

Image Blob increases over 50 times its original size when uploaded

What is the method for accessing font sizes through CSS code?

Transferring information between a pair of PHP functions via AJAX communications

Exploring the fundamentals of Django with a touch of creativity in CSS

Can JSF Ajax be used to update non-JSF components like plain HTML elements?

What could be causing the dysfunction of the jQuery class adding function?

Having trouble getting a DIV to appear on top of another DIV containing an image

How do I incorporate global typings when adding type definitions to an npm module?

Activate browser scrollbar functionality

AngularJS ui-select not responding correctly to selected items

Is the 'Document' term not recognized within expressjs?

submitting URL from dropdown menu without using the 'submit' button

Automatically modify browser configurations to disable document caching

How can I remove specific items from a session array when they are selected?

Utilize $stateParams to dynamically generate a title

Guide on implementing various styles for a class in Tailwind CSS when transitioning to dark mode with the help of Next.js 13.4 and next-theme

The nodes on a 2-dimensional grid overlap each other when the browser window is resized

Changing the Month Label Format from Short (MMM) to Long (MMMM) in Angular Material Datepicker

Is there a way for me to scroll and bring the block up to the header when the button is clicked?

Organize images with overlays to the center of the page