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

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

Answer 3

下記の作業溶液見つける：

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