Question

看到附着的小提琴。我有一个试用版，按下按钮将它们放入文本框中。我希望用户能够重新开始＃34;然后点击＆＃34;清除＆＃34;按钮删除他们的答案。清除按钮有效，但之后按下其他按钮不会像以前那样将它们放回文本框中。

＆＃34;清除＆＃34;的当前代码按钮：

function CLEAR(){
letters.value = "";
};

https://jsfiddle.net/xxPoLyGLoTxx/ea6rnwLr/

Answer 1

替换

letters.clear = "";

与

letters.innerHTML = "";

以下是更新后的fiddle

Answer 2

＆＃13;

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

＆＃13;

html {
	background: white;
	background-size: cover;
	height: 100%;
	width: 100%;
	top:0;
	left:0;
	bottom: 0;
	right:0;
}
#wrapper{
  height: 90%;
  top: 5%;
	width: 100%;
	left: 0;
	position: absolute;
}
#row1 {
	position: absolute;
	width: 40%;
	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 {
	position: absolute;
	width: 40%;
	height: 5%;
  left: 30%;
  top: 20%;
}
#row3 {
	position: absolute;
	width: 40%;
	height: 5%;
  left: 30%;
  top: 30%;
}
#row4 {
	position: absolute;
	width: 40%;
	height: 5%;
  left: 30%;
  top: 40%;
}
#finalrow {
	position: absolute;
	width: 40%;
	height: 20%;
  left: 30%;
  top: 50%;
}
#letters{
  position: absolute;
  left: 25%;
  top: 30%;
  color: red;
  width: 175px;
  height: 25px;
}

＆＃13;

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

＆＃13;

Answer 3

var lettersEle = document.getElementById('letters');

function setlettersValue(val) {
   lettersEle.innerHTML += val.value
}

function BLANK() {
  lettersEle.innerHTML = "";
}
function CLEAR(){
  letters.innerHTML = "";
};

html {
	background: white;
	background-size: cover;
	height: 100%;
	width: 100%;
	top:0;
	left:0;
	bottom: 0;
	right:0;
}
#wrapper{
  height: 90%;
  top: 5%;
	width: 100%;
	left: 0;
	position: absolute;
}
#row1 {
	position: absolute;
	width: 40%;
	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 {
	position: absolute;
	width: 40%;
	height: 5%;
  left: 30%;
  top: 20%;
}
#row3 {
	position: absolute;
	width: 40%;
	height: 5%;
  left: 30%;
  top: 30%;
}
#row4 {
	position: absolute;
	width: 40%;
	height: 5%;
  left: 30%;
  top: 40%;
}
#finalrow {
	position: absolute;
	width: 40%;
	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>

清除文本框使其无法访问

3 个答案: