JavaScript清除文本框DOM只清除顶部框

Question

所以我有一组文本框，我有一个明确的按钮，但单击时，它只会从顶部框中删除文本。我想知道是否有这种方法可以将所有的盒子都拆下来？

function eraseText() { 
    document.getElementById("output").value = ""; 
} 


var sections = { 

    p1 : {sname: "Dynamic Table ", mscore: 20}, 
    p2 : {sname: "IntelliJ Usage ", mscore: 10}, 
    p3 : {sname: "Calender Control", mscore: 30}, 
    p4 : {sname: "Active Form  ", mscore: 20}, 
    p5 : {sname: "Object Database ", mscore: 20} 
}; 

document.write("<pre>"); 
document.write(Object.keys(sections).reduce(function(s, p, i) { 
    var o = sections[p]; 
    return s + (i>0?'<br><br><br><br>':'') + o.sname + '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' + o.mscore + '&nbsp;&nbsp;&nbsp;' + '<textarea id="output" rows="4" cols="25">' + '</textarea>' + '&nbsp;&nbsp;&nbsp;'}, '') 
); 
document.write("</pre>"); 

然后在HTML我有这样的提交按钮：

<input type="button" value="Clear" onclick="javascript:eraseText();"> 

Answer 1

如果你把它包装的所有形式的标签，你可以使用

<input type="reset" /> 

如果不是这样，我会给他们一个类和代码：

function eraseText() { 
    var out = document.querySelectorAll(".out"); 
    for (var i=0;i<out.length;i++) { 
     out[i].value=""; 
    } 
} 

L ooking在你的代码，我也会改变使用文件撰写的，并删除无用javascript:标签

var sections = { 
    p1 : {sname: "Dynamic Table ", mscore: 20}, 
    p2 : {sname: "IntelliJ Usage ", mscore: 10}, 
    p3 : {sname: "Calender Control", mscore: 30}, 
    p4 : {sname: "Active Form  ", mscore: 20}, 
    p5 : {sname: "Object Database ", mscore: 20} 
}; 

document.getElementById("container").innerHTML=Object.keys(sections).reduce(
    function(s, p, i) { 
    var o = sections[p]; 
    return s + (i>0?'<br><br><br><br>':'') + o.sname + 
    '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' + 
    o.mscore + '&nbsp;&nbsp;&nbsp;' + 
    '<textarea class="out" id="output" rows="4" cols="25"></textarea>' + '&nbsp;&nbsp;&nbsp;' 
    }, ''); 

，给容器

#container { 
    display: block; 
    unicode-bidi: embed; 
    font-family: monospace; 
    white-space: pre; 
}