如何获取要在文本框中显示的按钮值

时间:2017-08-17 00:17:46

标签: javascript html

这是我的代码,如何获取要在文本框中显示的按钮值。 我尝试了这个,但它不起作用

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

3 个答案:

答案 0 :(得分:0)

这是你的小提琴修改工作。

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>

答案 1 :(得分:0)

您正在设置文本输入的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>

答案 2 :(得分:0)

我不确定为什么你的例子不能正常工作,在尝试时我不断收到控制台错误,它违反了政策。但是,如果您只想让它工作,您可以随时删除onclick属性并使用以下javascript:

import pandas as pd
import pypyodbc
host = "servername"
username = "sa"
password = "sa@12"
database = "dbname"

try:
    conn = pypyodbc.connect(driver='{SQL Server}',server=host,UID=username,pwd=password,database=database)
    print ("SUCCESS")
except pypyodbc.Error as e:
    print (e.args[1])

这会通过javascript(即addEventListener ...)添加监听器。然后,您可以通过事件(e)访问您单击的元素,同时使该函数可以在类似情况下重复使用。快乐的编码!