CODEWITHSUNDEEP
javascripthtml
Pete
Pete

Reputation: 170

Reading value from dynamically created button in Javascript/HTML

I have created a virtual keyboard and am trying to fill an input box with the letters that appear on the button. I have the following functions:

This function takes a character and makes a button with the char as its value:

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

This function creates a button for all letters:

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

This function is the problem, it should read the value from the button and append it to the input box: 

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

The HTML for the input box is like so:

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

Upvotes: 4

Views: 470

Answers (3)

user5734311
user5734311

Reputation:

Try this:

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

Upvotes: 3

Abhijeet
Abhijeet

Reputation: 11

find working solution below:

adding button with label

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 of button function:

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

Upvotes: 0

n4gys4nyi
n4gys4nyi

Reputation: 933

if you create an event handler for the buttons click event where you created it you can get the data of the button when the button is clicked

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

or you still can use the function you have created

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

but this way you need to change the keyStroke function a little bit, to get the event's source.

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

Upvotes: 0

Related Questions