如何将循环的每个迭代存储为innerHTML

Question

As a JS novice I am trying to store all values of an object inside separate divs. (per div the name of the chord and an image).

I get all values logged to the console, but when I store it inside a div I only get the final outcome of the loop, being the last value. In other words: I cant seem to find out how to store the values inside a div for each time the loop runs.

Thank you in forehand!

here the stuff:

 var output = document.getElementById('output'); // chords & tabs images var chords = { "C": { "Chord" : "C", "imgSrc" : "http://www.guitar-chords.org.uk/chord-images/c-major-1.gif" }, "Cmaj9": { "Chord" : "Cmaj9", "imgSrc" : "http://www.totalguitarandbass.com/system/diagrams/495/original/CMaj9.png?1472445766" } }; // looping through for(var key in chords) { var value = chords[key]; // log console.log(value); // my silly attempt output.innerHTML = "<div class=\\"chord\\">" + "<h1>" + value.Chord + "</h1>" + "<img src=\\"" + value.imgSrc + "\\"/>"; } 

 div { box-sizing:border-box; display:block; } .chord { display:block; float:left; width:250px; height:auto; border:1px solid tomato; } .chord h1 { font-size:2.4em; text-align:center; padding:5px; } .chord img { display:block; margin-top:25px; width:200px; height:auto; padding:25px; } 

 <div id="output"></div> 

Answer 1

Using = overwrites any prior changes to the property. You should use the += operator to append the next element to the innerHTML:

 var output = document.getElementById('output'); // chords & tabs images var chords = { "C": { "Chord" : "C", "imgSrc" : "http://www.guitar-chords.org.uk/chord-images/c-major-1.gif" }, "Cmaj9": { "Chord" : "Cmaj9", "imgSrc" : "http://www.totalguitarandbass.com/system/diagrams/495/original/CMaj9.png?1472445766" } }; // looping through for(var key in chords) { var value = chords[key]; // log console.log(value); // vvvv Right here vvvvv output.innerHTML += "<div class=\\"chord\\">" + "<h1>" + value.Chord + "</h1>" + "<img src=\\"" + value.imgSrc + "\\"/>"; } 

 div { box-sizing:border-box; display:block; } .chord { display:block; float:left; width:250px; height:auto; border:1px solid tomato; } .chord h1 { font-size:2.4em; text-align:center; padding:5px; } .chord img { display:block; margin-top:25px; width:200px; height:auto; padding:25px; } 

 <div id="output"></div> 

Answer 2

Here is a fiddle: https://jsfiddle.net/treyeckels/jszzg1oa/

The content of the div is always being replaced by your last line in your for loop, which is why the last item in your content array is what's always only displayed.

innerHTML is a property of the output node that you are retrieving using getElementById , so you are writing over the innerHTML of the node every loop.

Instead what you want to do is create new DOM nodes and append them to the last child in the output div or if you want to continue to use innerHTML , concatenate all of the contents together as a string and then set output innerHTML to the concatenated string.

Something like (in es6):

const chords = [
    {
        "Chord" : "C",
        "imgSrc" : "http://www.guitar-chords.org.uk/chord-images/c-major-1.gif"
    },
    {
            "Chord" : "Cmaj9",
        "imgSrc" : "http://www.totalguitarandbass.com/system/diagrams/495/original/CMaj9.png?1472445766"
    }
];

const getHTML = (chord, imgSrc) => {
    return(
    `<div class="chord">
        <h1>${chord}</h1>
      <img src="${imgSrc}" />
    </div>`
  )
};

const completeHTML = chords.reduce((prev, next) => {
        return prev + getHTML(next.Chord, next.imgSrc);
}, '');

const output = document.getElementById('output');
output.innerHTML = completeHTML;