如何使用display.textContent.遍历将在网页上显示的对象
考虑到
var list = {x:1, y:2, z:3};
for (var property in list){
div.textContent = (list[property])
}
//Displays 3.
//Div is referring to my HTML page.
我想能够显示1,但点击按钮后,它会显示2、3等。我怎么能做到呢?
您不存储div.textContent
的前一个值,所以您只看到最后一次迭代的结果。试试这个
var list = {x:1, y:2, z:3};
div.textContent = "";
for (var property in list){
div.textContent = div.textContent + " " + (list[property]);
}
你可以试试这样的东西:
var list = {x:1, y:2, z:3},
index = 1, // Store the current iteration
keys = Object.keys(list); // Grab all the keys for the object
var button = document.querySelector("button"),
div = document.querySelector("div");
// Bind your click handler
button.addEventListener("click", function() {
// Might want to do something after '3'
if(index >= keys.length) return;
// Otherwise set the content from the key at 'index' and increment
// the index for the next click
div.textContent = list[keys[index++]];
});
<div>1</div>
<button>Next</button>
如何在每次单击按钮时显示
1,2,3
?
function displayResult(){
var list = {x:1, y:2, z:3};
var div = document.querySelector("#myDiv"); //getting my div element
var text = new Array();
for (var property in list){
text.push(list[property]) //adding values in text array
}
div.textContent = text.join(",") //array concatenation
}
<div id="myDiv"></div>
<button onclick="displayResult()">Display</button>