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

- Pete

---

1. 您的每个按钮都具有完全相同（应该是唯一的）ID：btn
2. 在定义按钮时调用keyStroke()，而不是在单击按钮时。

- user5734311

你需要创建一个点击事件处理程序，并且可能需要读取按钮的 value 属性的值。 - aross

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

- user5734311

---

innerText是非标准的，最好使用像value这样的属性。 - aross

@aross 谢谢，已更改为 .innerHTML。 - user5734311

谢谢你的回答，它完美地解决了问题。不过我有一个问题：function () { keyStroke(this); };是什么意思？我从来没有见过这种调用函数的方式。 - Pete

这就是重点；实际上我并没有在那一行中调用任何东西。我正在将一个匿名函数设置为按钮的 onclick。当按钮被点击时，匿名函数被调用，然后才会实际执行内部的命令。否则，就像我说的那样，keyStroke(this) 就会立即执行，而不是在按钮被点击时执行。 - user5734311

Answer 2

如果您在创建按钮的单击事件处理程序时将其创建，您可以在单击按钮时获取按钮的数据。

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

但是这种方式需要稍微改变keyStroke函数，以获取事件的源。

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

- lacexd

Answer 3

请查看下面的有效解决方案：

添加带标签的按钮

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

- Abhijeet