如何显示带有对象的.textcontent

How to display.textcontent with objects

本文关键字：对象 textcontent 何显示 显示      更新时间：2023-09-26

如何使用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>

相关文章：