Question

大家好，我的朋友Spiritx在这个网站上问了一个关于如何使用innerHTML显示对象内容的好问题，所以他和我分享了这个，所以我喜欢这个脚本所以我决定将它添加到我的脚本集合中。因此，我不小心按下按钮不止一次，每次按下按钮时对象内容都会不断显示，那么如何才能显示对象输出一次？无论我按下按钮多少次，我问他是否知道如何展示这一次，但他不知道这里的代码如何看我的意思。

＆＃13;

 function output_object(){ 
var student = {
    name: "Dave ",
    grades: [80, 85, 90 ,95]
    };
    
    for (index in student ) {
    document.getElementById("x").innerHTML += student[index];
    }
}

＆＃13;

<p id="x"></p>
  <button onclick="output_object()">Click</button>

＆＃13;

Answer 1

在+之后移除.innerHTML符号。使用+，您可以将新学生与之前的innerHTML值联系起来。

＆＃13;

function output_object(){ 

    document.getElementById("x").innerHTML = '';

    var student = {
       name: "Dave ",
       grades: [80, 85, 90 ,95]
    };
    
    
    for (index in student ) {
       document.getElementById("x").innerHTML += student[index];
    }

}

＆＃13;

<p id="x"></p>
<button onclick="output_object()">Click</button>

＆＃13;

或者只是使用属性＆＃39;直接命名

＆＃13;

function output_object(){ 

    var student = {
       name: "Dave ",
       grades: [80, 85, 90 ,95]
    };
    
    document.getElementById("x").innerHTML = student.name + student.grades;
    
}

＆＃13;

<p id="x"></p>
<button onclick="output_object()">Click</button>

＆＃13;

Answer 2

您可以检查div是否为空。如果没有，不要做任何事情。见例。

 function output_object(){
 if (document.getElementById("x").innerHTML == "") {
    var student = {
        name: "Dave ",
        grades: [80, 85, 90 ,95]
        };

        for (index in student ) {
        document.getElementById("x").innerHTML += student[index];
        }
    }
}

<p id="x"></p>
  <button onclick="output_object()">Click</button>

如何一次显示此innerHTML脚本

2 个答案: