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

Question

我创建了一个虚拟键盘，并试图用按钮上显示的字母填充输入框。我有以下功能:

此函数接受一个字符并以该字符作为其值创建一个按钮:

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

Answer 1

试试这个:

var keyList = "QWERTYUIOPASDFGHJKLZXCVBNM";

for (var i in keyList) {    //loop through letters in keyList
  var button = keyButton(keyList[i]);
  document.body.appendChild(button);
}

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

function keyStroke(b) {
  document.getElementById("searchBar").value += b.innerHTML;
}

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