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" />

如果没有，我会给他们一个 class 并编码为：

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

查看您的代码，我还会更改 document.write 的使用并删除无用的 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;'
  }, '');

并给容器

的 css

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

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

JavaScript clear text boxes DOM only clearing top box

html

javascript

submit

button