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

Change the input value by clicking different buttons

What is the best way to extend the functionality of npm script with command line arguments

The MongoDB regex is failing to provide the expected outcome

Accessing information from a database table using Highchart and Ruby on Rails (ROR

What is the most effective method for obtaining only the "steamid" from an AJAX request (or any other method)?

Choosing the initial offspring of an element that do not share a common parent

The function Waterline.create() is not available

Spontaneous Link with JQuery and Colorbox

Tips for developing a dynamic game that adjusts to different screen sizes using Phaser 3

If there is data in MySQL, proceed to display the results on the page; if not, display a check

Store the visible image location in memory to be used across various sections

When the screen is resized, the embedded iframe moves smoothly to the left side

Is there a way to implement a scrollbar that only scrolls through one specific column in an HTML table?

Warning: The core schema has detected an unknown property `color` for the component or system `undefined` in Aframe + Vuejs. This issue was flagged within 10 milliseconds in

Variations in CSS Stylesheets for Various Parts of the Body

Using an array of JSON objects to set up a Backbone.js bootstrap-initialized application

How to showcase an image with Angular 2?

Within a div element, there are links that I would like to hover over to emphasize the text

Run code once the Firestore get method has completed its execution

rendering google charts using jade template