Question

作为JS新手，我试图将对象的所有值存储在单独的div中。（每个div的和弦名称和图像）。

我将所有值记录到控制台，但是当我将它存储在div中时，我只得到循环的最终结果，即最后一个值。换句话说：我似乎无法找到每次循环运行时如何将值存储在div中。

正手表示感谢！

这里的东西：

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

使用=覆盖对属性的任何先前更改。您应该使用+ =运算符将下一个元素追加到innerHTML：

＆＃13;

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 + "\"/>";
}

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

这是一个小提琴：https://jsfiddle.net/treyeckels/jszzg1oa/

div的内容总是被for循环中的最后一行替换，这就是为什么内容数组中的最后一项始终只显示。

innerHTML是您使用output检索的getElementById节点的属性，因此您每个循环都在编写节点的innerHTML。

相反，您要做的是创建新的DOM节点并将它们附加到output div中的最后一个子节点，或者如果您想继续使用innerHTML，请将所有内容连接在一起一个字符串，然后将output innerHTML设置为连接字符串。

像（在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;

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

2 个答案: