ボタンの値をテキストボックスに表示するにはどうすればいいですか

Question

これは私のコードです。ボタンの値をテキストボックスに表示するにはどうすればいいですか？ 私はこれを試してみましたが、それは

<p>Click the button to return the value of its value attribute.</p> 

<button id="myBtn" value="myvalue" onclick="myFunction()">Try it</button> 

<input id="demo" readonly> 


<script> 
    function myFunction() { 
    var x = document.getElementById("myBtn").value; 
    document.getElementById("demo").innerHTML = x; 
    } 
</script> 

を動作しませんでしたこれは私がそれをhttps://jsfiddle.net/mp5pndyw/

Answer 1

ここで動作するように変更され、あなたのフィドルだを試してみましたフィドルからのリンクがあります。

https://jsfiddle.net/mp5pndyw/1/

var buttons = document.querySelectorAll('.dropdown-item') 
 
var textbox = document.getElementById('display') 
 

 
for (let i=0; i < buttons.length; i++) { 
 
\t buttons[i].addEventListener("click", function(e) { 
 
\t \t textbox.value = e.target.value 
 
\t }) 
 
}

<form method = "POST" action = "addprocess.php"> 
 
\t <fieldset> 
 
\t <legend align="center">Semester Courses</legend><br><br> 
 
\t <div class="row"><label style="font-family: verdana; font-size: 25px;">&emsp;&emsp;&emsp;BIOLOGY&emsp;</label> 
 
    \t <div class="col-lg-4"> 
 
    <div class="input-group"> 
 
     <input type="text" id="display" class="form-control" aria-label="Text input with dropdown button" readonly> 
 
     <div class="input-group-btn"> 
 
     <button type="button" id="dropdown0" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
 
      Click to Select 
 
     </button> 
 
    
 
     <div class="dropdown-menu dropdown-menu-right"> 
 
      <button type="button" class="dropdown-item" value="BIOL 8803">BIOL 8803</button> 
 
      <div role="separator" class="dropdown-divider"></div> 
 
      <button type="button" class="dropdown-item" value="BIOL 8805">BIOL 8805</button> 
 
      <div role="separator" class="dropdown-divider"></div> 
 
      <button type="button" class="dropdown-item" value="BIOL 8807">BIOL 8807</button> 
 
      <div role="separator" class="dropdown-divider"></div> 
 
      <button type="button" class="dropdown-item" option value="BIOL 8809">BIOL 8809</button> 
 
     
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div><br><br> 
 
<input name="submit" type ="submit" value="click to submit"> 
 
<input name="reset" type ="reset" value="Reset"> 
 
</fieldset> 
 
</form>

Answer 2

は、テキスト入力のinnerHTMLを設定しています。代わりに、私はそれがポリシーに違反しているコンソールエラーを取得保管、それをしようとしたとき、あなたの例では、動作していない、正確に、なぜわからないんだけどvalue

function myFunction() { 
 
    var x = document.getElementById("myBtn").value; 
 
    document.getElementById("demo").value = x; 
 
}

<p>Click the button to return the value of its value attribute.</p> 
 

 
<button id="myBtn" value="myvalue" onclick="myFunction()">Try it</button> 
 

 
<input id="demo" readonly>

Answer 3

使用する必要があります。あなたはちょうどそれが仕事をしたいしかし、あなたは常に次のjavascriptあなたのonclick属性を削除し、使用することができた場合：

function myFunction(e) { 
    var myInput = document.getElementById("demo") 
    myInput.value = e.srcElement.value 
} 

document.getElementById("myBtn").addEventListener("click", myFunction) 

これはJavaScriptでリスナーを追加します（つまり、addEventListenerを...）。イベント（e）でクリックした要素にアクセスし、同様の状況で再利用できるようにすることができます。ハッピーコーディング！