在Javascript/HTML中從動態創建的按鈕中讀取值

我創建了一個虛擬鍵盤，並試圖用出現在按鈕上的字母填充輸入框。我有以下功能：在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" />

來源

2016-12-12 Pete

1.你的按鈕的每一個具有完全相同的（假設是唯一的）id：'btn' 2. keyStroke（）在你定義一個按鈕時調用，而不是當你點擊它時調用 –

Y您需要創建點擊事件處理程序，並且可能讀取按鈕的「值」屬性的值 – aross

試試這個：如果你創建了按鈕的事件處理程序

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

來源

2016-12-12 15:35:45

innerText是[非標準]（https://developer.mozilla.org/en-US/docs/Web/API/ Node/innerText），最好使用'value'這樣的屬性' – aross

@aross謝謝，改爲'.innerHTML' –

謝謝你的回答，它工作得很好。問題是：什麼是'function（）{keyStroke（this）; };'我從來沒有見過這樣的函數被調用。 – Pete

單擊事件您建立點擊按鈕時可以得到按鈕的數據

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

來源

2016-12-12 15:37:27 lacexd

在下面找到工作液：用標籤

添加按鈕

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

按鈕功能的onclick：

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

來源

2016-12-12 15:59:32 Abhijeet

在Javascript/HTML中從動態創建的按鈕中讀取值

回答

相關問題