アタッチド・フィドルを参照してください。私は、ボタンを押してテキストボックスに入れる試行をしています。私は、ユーザーが「最初からやり直して」「クリア」ボタンを押して答えを消すことができるようにしたい。クリアボタンは機能しますが、その後、他のボタンを押しても、前と同じようにテキストボックスに戻りません。 "クリア" ボタンのテキストボックスをクリアするとアクセスできなくなる
現在のコード：
function CLEAR(){
letters.value = "";
};
https://jsfiddle.net/xxPoLyGLoTxx/ea6rnwLr/
letters.innerHTML = "";
と
letters.clear = "";
を交換してくださいここで更新です0
これはシンプルで洗練されたソリューションです。ありがとうございました！ –
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'属性でも同じ結果が得られます。 https://www.w3schools.com/tags/att_id.asp – Danibix
よろしくお願いします。ありがとう！私はおそらくそれを "クラス"にするためにそれを切り替えます。 –