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