从Javascript/HTML中动态创建的按钮读取值

我已经创建了一个虚拟键盘，并试图用按钮上出现的字母填充一个输入框。我有以下职能：

此函数接受一个字符并生成一个以字符为值的按钮：

function keyButton(char) {
  var btn = document.createElement("button"); //create button
  btn.innerText = char; //fill it with char
  btn.id = "btn";
  keyStroke()
  return btn;
}

此函数为所有字母创建一个按钮：

var keyList = "QWERTYUIOPASDFGHJKLZXCVBNM";
for (i in keyList)
{
  var button = keyButton(keyList[i]);
  document.body.appendChild(button)
}

此函数就是问题所在，它应该从按钮读取值并将其附加到输入框：

function keyStroke() {
  document.getElementById("searchBar").value += document.getElementById("btn").innerText;
}

输入框的HTML如下所示：

<input id="searchBar" class="inputBar" placeholder="Enter something" />

试试这个：

var keyList=“qwertyuiopasdfghjklzxcvnm”； 对于（键列表中的var i）{//循环键列表中的字母 var按钮=键按钮（键列表[i]）； document.body.appendChild（按钮）； } 功能键按钮（字符）{ var btn=document.createElement（“按钮”）；//创建按钮 btn.innerHTML=char；//用char填充 btn.onclick=function（）{击键（this）；}； 返回btn； } 功能击键（b）{ document.getElementById（“搜索栏”）.value+=b.innerHTML； }

---

如果为按钮单击事件创建事件处理程序，则单击按钮时可以获取按钮的数据

function keyButton(char) {
  var btn = document.createElement("button"); //create button
  btn.innerText = char; //fill it with char
  btn.id = "btn";
  btn.onclick = function() {//yourcodehere}
  keyStroke()
  return btn;
}

或者您仍然可以使用您创建的函数

function keyButton(char) {
  var btn = document.createElement("button"); //create button
  btn.innerText = char; //fill it with char
  btn.id = "btn";
  btn.onclick = keyStroke;
  keyStroke()
  return btn;
}

但是，通过这种方式，您需要稍微更改

击键

函数，以获取事件的源

function keyStroke(evt) {
  document.getElementById("searchBar").value += evt.target.innerText;
}

---

在下面找到工作解决方案：

添加带有标签的按钮

function keyButton(chara) {
var btn = document.createElement("button"); //create button
btn.innerText = chara; //fill it with char
btn.id = "btn";
btn.onclick=onclickFunction;
return btn;
}

点击按钮功能：

function onclickFunction(ev){
var searchBar=document.getElementById('searchBar');
searchBar.value=searchBar.value + ev.srcElement.innerText;
}

---

1.您的每一个按钮都有完全相同的id:

btn

2。keyStroke（）是在定义按钮时调用的，而不是在单击按钮时调用的。您需要创建一个单击事件处理程序，并可能从按钮的

value

propertyinnerText读取值。如果使用

value

@aross谢谢，改为

。innerHTML

谢谢您的回答，它很好用。一个问题：什么是

function（）{keyStroke（this）；}我从未见过函数被这样调用。这就是重点；事实上，我并没有在电话里打任何电话。我正在将匿名函数设置为按钮的
onclick
。单击按钮时，将调用匿名函数，只有在该函数调用后，内部的命令才会实际执行。否则，就像我说的，
击键（这个）
将立即执行，而不是每次单击按钮。