LoLo LoLo - 1 month ago 8
Javascript Question

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

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>

Answer

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: