请参阅附件提琴。我有一个试验，按下按钮将它们放入文本框。我希望用户能够“重新开始”并点击“清除”按钮来清除他们的答案。清除按钮有效，但之后按下其他按钮不会像以前那样将它们放回到文本框中。清除文本框使其无法访问
为 “清除” 按钮，当前代码：
function CLEAR(){
letters.value = "";
};
https://jsfiddle.net/xxPoLyGLoTxx/ea6rnwLr/
function F() {
document.getElementById('letters').insertAdjacentHTML('beforeend', "F");
}
function H() {
document.getElementById('letters').insertAdjacentHTML('beforeend', "H");
}
function J() {
document.getElementById('letters').insertAdjacentHTML('beforeend', "J");
}
function K() {
document.getElementById('letters').insertAdjacentHTML('beforeend', "K");
}
function L() {
document.getElementById('letters').insertAdjacentHTML('beforeend', "L");
}
function N() {
document.getElementById('letters').insertAdjacentHTML('beforeend', "N");
}
function P() {
document.getElementById('letters').insertAdjacentHTML('beforeend', "P");
}
function Q() {
document.getElementById('letters').insertAdjacentHTML('beforeend', "Q");
}
function R() {
document.getElementById('letters').insertAdjacentHTML('beforeend', "R");
}
function S() {
document.getElementById('letters').insertAdjacentHTML('beforeend', "S");
}
function T() {
document.getElementById('letters').insertAdjacentHTML('beforeend', "T");
}
function Y() {
document.getElementById('letters').insertAdjacentHTML('beforeend', "Y");
}
function BLANK() {
document.getElementById('letters').insertAdjacentHTML('beforeend', " ");
}
function CLEAR(){
letters.innerHTML = "";
};html {
\t background: white;
\t background-size: cover;
\t height: 100%;
\t width: 100%;
\t top:0;
\t left:0;
\t bottom: 0;
\t right:0;
}
#wrapper{
height: 90%;
top: 5%;
\t width: 100%;
\t left: 0;
\t position: absolute;
}
#row1 {
\t position: absolute;
\t width: 40%;
\t height: 5%;
left: 30%;
top: 10%;
}
#button1{
position: absolute;
left: 0%;
top: 0%;
height: 25px;
width: 25px;
float: top;
clear: left;
}
#button2{
position: absolute;
left: 48%;
top: 0%;
height: 25px;
width: 25px;
float: top;
clear: both;
}
#button3{
position: absolute;
right: 0%;
top: 0%;
height: 25px;
width: 25px;
float: top;
clear: left;
}
#button4{
position: absolute;
left: 43%;
top: 0%;
height: auto;
width: auto;
float: top;
clear: left;
}
#button5{
position: absolute;
left: 0%;
bottom: 0%;
height: auto;
width: auto;
float: top;
clear: left;
}
#button6{
position: absolute;
bottom: 0%;
right: 0%;
height: auto;
width: auto;
float: top;
clear: left;
}
#row2 {
\t position: absolute;
\t width: 40%;
\t height: 5%;
left: 30%;
top: 20%;
}
#row3 {
\t position: absolute;
\t width: 40%;
\t height: 5%;
left: 30%;
top: 30%;
}
#row4 {
\t position: absolute;
\t width: 40%;
\t height: 5%;
left: 30%;
top: 40%;
}
#finalrow {
\t position: absolute;
\t width: 40%;
\t height: 20%;
left: 30%;
top: 50%;
}
#letters{
position: absolute;
left: 25%;
top: 30%;
color: red;
width: 175px;
height: 25px;
}<div id="wrapper">
<b><center>Select the letters in the order presented. Use the blank button to fill in forgotten items.</center></b>
<div id="row1">
<p>
<button onclick="F()" id="button1" value="F">F</button>
<button onclick="H()" id="button2" value="H">H</button>
<button onclick="J()" id="button3" value="J">J</button>
</p>
</div>
<div id="row2">
<p>
<button onclick="K()" id="button1" value="K">K</button>
<button onclick="L()" id="button2" value="L">L</button>
<button onclick="N()" id="button3" value="N">N</button>
</p>
</div>
<div id="row3">
<p>
<button onclick="P()" id="button1" value="P">P</button>
<button onclick="Q()" id="button2" value="Q">Q</button>
<button onclick="R()" id="button3" value="R">R</button>
</p>
</div>
<div id="row4">
<p>
<button onclick="S()" id="button1" value="S">S</button>
<button onclick="T()" id="button2" value="T">T</button>
<button onclick="Y()" id="button3" value="Y">Y</button>
</p>
</div>
<div id="finalrow">
<p>
<button onclick="BLANK()" id="button4" value="BLANK">BLANK</button>
</p>
<p>
<center><textarea id="letters" disabled></textarea></center>
</p>
<p>
<button onclick="CLEAR()" id="button5" value="CLEAR">CLEAR</button>
</p>
<p>
<button type="submit" id="button6" value="SUBMIT">DONE</button>
</p>
</div>
</div>var lettersEle = document.getElementById('letters');
function setlettersValue(val) {
lettersEle.innerHTML += val.value
}
function BLANK() {
lettersEle.innerHTML = "";
}
function CLEAR(){
letters.innerHTML = "";
};html {
\t background: white;
\t background-size: cover;
\t height: 100%;
\t width: 100%;
\t top:0;
\t left:0;
\t bottom: 0;
\t right:0;
}
#wrapper{
height: 90%;
top: 5%;
\t width: 100%;
\t left: 0;
\t position: absolute;
}
#row1 {
\t position: absolute;
\t width: 40%;
\t height: 5%;
left: 30%;
top: 10%;
}
#button1{
position: absolute;
left: 0%;
top: 0%;
height: 25px;
width: 25px;
float: top;
clear: left;
}
#button2{
position: absolute;
left: 48%;
top: 0%;
height: 25px;
width: 25px;
float: top;
clear: both;
}
#button3{
position: absolute;
right: 0%;
top: 0%;
height: 25px;
width: 25px;
float: top;
clear: left;
}
#button4{
position: absolute;
left: 43%;
top: 0%;
height: auto;
width: auto;
float: top;
clear: left;
}
#button5{
position: absolute;
left: 0%;
bottom: 0%;
height: auto;
width: auto;
float: top;
clear: left;
}
#button6{
position: absolute;
bottom: 0%;
right: 0%;
height: auto;
width: auto;
float: top;
clear: left;
}
#row2 {
\t position: absolute;
\t width: 40%;
\t height: 5%;
left: 30%;
top: 20%;
}
#row3 {
\t position: absolute;
\t width: 40%;
\t height: 5%;
left: 30%;
top: 30%;
}
#row4 {
\t position: absolute;
\t width: 40%;
\t height: 5%;
left: 30%;
top: 40%;
}
#finalrow {
\t position: absolute;
\t width: 40%;
\t height: 20%;
left: 30%;
top: 50%;
}
#letters{
position: absolute;
left: 25%;
top: 30%;
color: red;
width: 175px;
height: 25px;
}<div id="wrapper">
<b><center>Select the letters in the order presented. Use the blank button to fill in forgotten items.</center></b>
<div id="row1">
<p>
<button onclick="setlettersValue(this)" id="button1" value="F">F</button>
<button onclick="setlettersValue(this)" id="button2" value="H">H</button>
<button onclick="setlettersValue(this)" id="button3" value="J">J</button>
</p>
</div>
<div id="row2">
<p>
<button onclick="setlettersValue(this)" id="button1" value="K">K</button>
<button onclick="setlettersValue(this)" id="button2" value="L">L</button>
<button onclick="setlettersValue(this)" id="button3" value="N">N</button>
</p>
</div>
<div id="row3">
<p>
<button onclick="setlettersValue(this)" id="button1" value="P">P</button>
<button onclick="setlettersValue(this)" id="button2" value="Q">Q</button>
<button onclick="setlettersValue(this)" id="button3" value="R">R</button>
</p>
</div>
<div id="row4">
<p>
<button onclick="setlettersValue(this)" id="button1" value="S">S</button>
<button onclick="setlettersValue(this)" id="button2" value="T">T</button>
<button onclick="setlettersValue(this)" id="button3" value="Y">Y</button>
</p>
</div>
<div id="finalrow">
<p>
<button onclick="BLANK()" id="button4" value="BLANK">BLANK</button>
</p>
<p>
<center><textarea id="letters" disabled></textarea></center>
</p>
<p>
<button onclick="CLEAR()" id="button5" value="CLEAR">CLEAR</button>
</p>
<p>
<button type="submit" id="button6" value="SUBMIT">DONE</button>
</p>
</div>
</div>
我不明白你为什么要反复在你的代码相同的'id'为不同的按钮使用，因为'id'属性必须独一无二。您可以使用html'class'属性实现相同的结果。你可以在这里看到id的详细信息：https：//www.w3schools.com/tags/att_id.asp – Danibix
良好的通话。谢谢！我可能会改变这种情况，使其成为“班级”。 –