我如何获取按钮值以显示在文本框中

Question

This is my code, how do i get the button value to display in the text box. I tried this but it didn't work

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

this is a link from fiddle where i tried it https://jsfiddle.net/mp5pndyw/

Answer 1

Here's your fiddle modified to work.

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

 var buttons = document.querySelectorAll('.dropdown-item') var textbox = document.getElementById('display') for (let i=0; i < buttons.length; i++) { buttons[i].addEventListener("click", function(e) { textbox.value = e.target.value }) } 

 <form method = "POST" action = "addprocess.php"> <fieldset> <legend align="center">Semester Courses</legend><br><br> <div class="row"><label style="font-family: verdana; font-size: 25px;">&emsp;&emsp;&emsp;BIOLOGY&emsp;</label> <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

You are setting the innerHTML of the text input. Instead, you need to use 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

I'm not sure precisely why your example is not working, when attempting it I kept getting a console error that it violates a policy. If however you just want it to work, you could always remove your onclick attribute and use the following javascript:

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

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

This adds the listener via javascript (ie addEventListener... ). You can then access the element you clicked via the event (e), also making the function reusable for similar situations. Happy coding!