How to get innerHTML for each button and display in text box?

Question

Just some of the HTML, but it's the whole alphabet. I want to click any button and that letter will go in the text box. Do i have to create getelementbyID for each button or can I create some kind of loop? html - this is the html and it is basically the alphabet.

<div id="alpha" >
    <br/>
    <div align="center">
        <button id="q" class="letters">Q</button>
    </div>
    <div align="center">
        <button id="w" class="letters" onclick="theclick()">W</button>
    </div>
    <div align="center">
        <button id="e" class="letters">E</button>
    </div>
     <div align="center">
        <button id="r" class="letters">R</button>
    </div>
     <div align="center">
        <button id="t" class="letters">T</button>
    </div>


    **THIS IS THE JAVASCRIPT I HAVE. I only have the onclick function for button "w" for testing**

javascript - this is the javascript, it's not working but want to do some kind of loop to make it a more simple javascript code

<script>

    function theclick() {

        var x = document.getElementByClassName("letters").innerHTML;
        document.getElementById("textbox").value = x;
    };

</script>

Yeah I've used it but was seeing if it's possible to just use javascript, or maybe regex would be included in this? As long as it works :) — LoLo, Oct 26 '16 at 13:50
This is basically how jQuery does it: http://stackoverflow.com/questions/5023432/how-does-jquery-s-text-work-internally — roberrrt-s, Oct 26 '16 at 13:53

David Thomas · Accepted Answer · 2016-10-26T14:15:37.990

One approach I'd suggest is the following, using plain JavaScript:

// creating a named function to act as the event-handler:
function buttonOutput() {

  // to support older browsers you may need to declare
  // your variables with 'var' rather than 'let';
  // here we cache the textarea, via its id attribute:
  let textarea = document.querySelector('#result');

  // and here we update the textContent of that
  // textarea to the existing textContent with the
  // addition of the newly-clicked element (the
  // 'this' is the <button> element and is passed
  // from the EventTarget.addEventListener() method)
  // after calling String.prototype.trim() on that
  // textContent (to remove leading and trailing
  // white-space):
  textarea.textContent += this.textContent.trim();
}


// here we retrieve the <button> elements with the class
// of 'letters' from the document:
let buttons = document.querySelectorAll('button.letters'),

// here we convert the Array-like NodeList into an Array,
// using Array.from():
  buttonArray = Array.from(buttons);

// using Array.prototype.forEach() to iterate over the
// Array of <button> elements:
buttonArray.forEach(

  // 'button' is the current array-element of the Array
  // over which we're iterating; here we bind the
  // buttonOutput() function as the event-handler for
  // the 'click' event (note the deliberate lack of
  // parentheses in the function name):
  button => button.addEventListener('click', buttonOutput)
);

div > div {
  text-align: center;
}
div > button {
  width: 30%;
  text-align: center;
}

<div id="alpha">
  <div>
    <button id="q" class="letters">Q</button>
  </div>
  <div>
    <button id="w" class="letters" onclick="theclick()">W</button>
  </div>
  <div>
    <button id="e" class="letters">E</button>
  </div>
  <div>
    <button id="r" class="letters">R</button>
  </div>
  <div>
    <button id="t" class="letters">T</button>
  </div>
  <div>
    <button id="y" class="letters">Y</button>
  </div>
</div>

<textarea id="result"></textarea>

JS Fiddle demo.

The above snippet leans heavily towards using ES6 features, such as let, Array.from() and Arrow functions; an ES5 alternative – compatible with older browsers – follows:

// creating a named function to act as the event-handler:
function buttonOutput() {

  // 'let' changed to 'var':
  var textarea = document.querySelector('#result');

  textarea.textContent += this.textContent.trim();
}


// here we retrieve the <button> elements with the class
// of 'letters' from the document:
let buttons = document.querySelectorAll('button.letters'),

  // here we convert the Array-like NodeList into an Array,
  // using Function.prototype.call() and Array.prototype.slice():
  buttonArray = Array.prototype.slice.call(buttons);

// using Array.prototype.forEach() to iterate over the
// Array of <button> elements:
buttonArray.forEach(function(button) {
  // button is the current Array-element of the
  // Array over which we're iterating.

  // here we assign the buttonOutput() function
  // as the event-handler for the 'click' event:
  button.addEventListener('click', buttonOutput)
});

div > div {
  text-align: center;
}
div > button {
  width: 30%;
  text-align: center;
}

<div id="alpha">
  <div>
    <button id="q" class="letters">Q</button>
  </div>
  <div>
    <button id="w" class="letters" onclick="theclick()">W</button>
  </div>
  <div>
    <button id="e" class="letters">E</button>
  </div>
  <div>
    <button id="r" class="letters">R</button>
  </div>
  <div>
    <button id="t" class="letters">T</button>
  </div>
  <div>
    <button id="y" class="letters">Y</button>
  </div>
</div>

<textarea id="result"></textarea>

JS Fiddle demo.

References:

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

A solution with jQuery would be:

$(function() {
  $('.letters').on('click', function() {
    $('#textbox').text( $('#textbox').text()+$(this).text() );
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="textbox"></div>
<div id="alpha" >
  <div align="center">
    <button id="q" class="letters">Q</button>
  </div>
  <div align="center">
    <button id="w" class="letters">W</button>
  </div>
  <div align="center">
    <button id="e" class="letters">E</button>
  </div>
  <div align="center">
    <button id="r" class="letters">R</button>
  </div>
  <div align="center">
    <button id="t" class="letters">T</button>
  </div>
</div>

Pure JS

var letters = document.getElementsByClassName("letters");

var addLetter = function() {
  var val = document.getElementById("textbox").innerHTML,
      thisVal = this.innerHTML;
  document.getElementById("textbox").innerHTML = val + thisVal;
};

for (var i = 0; i < letters.length; i++) {
  letters[i].addEventListener('click', addLetter, false);
}

<div id="textbox"></div>
<div id="alpha" >
  <div align="center">
    <button id="q" class="letters">Q</button>
  </div>
  <div align="center">
    <button id="w" class="letters">W</button>
  </div>
  <div align="center">
    <button id="e" class="letters">E</button>
  </div>
  <div align="center">
    <button id="r" class="letters">R</button>
  </div>
  <div align="center">
    <button id="t" class="letters">T</button>
  </div>
</div>

@LoLo, I've added a pure JS solution too. – GreyRoofPigeon Oct 26 '16 at 14:00 — GreyRoofPigeon, Oct 26 '16 at 14:00

score 0 · Answer 3 · answered Oct 26 '16 at 13:56

Or a Vanilla JS solution would be this:

var buttons = document.querySelectorAll("#alpha button");

for(var i =0; i < buttons.length; i++){
  var btn = buttons[i];
  btn.addEventListener("click", function() {
    document.getElementById("textbox").value += this.innerHTML;
  });
}

<div id="alpha">
  <div align="center">
    <button id="q" class="letters">Q</button>
  </div>
  <div align="center">
    <button id="w" class="letters">W</button>
  </div>
  <div align="center">
    <button id="e" class="letters">E</button>
  </div>
  <div align="center">
    <button id="r" class="letters">R</button>
  </div>
  <div align="center">
    <button id="t" class="letters">T</button>
  </div>
</div>
<input id="textbox">

How to get innerHTML for each button and display in text box?

3 Answers3

Pure JS