JSFiddle - React, Tailwind, and code Playground

by dshilkret

HTML

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

JavaScript

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

for(var i =0; i < buttons.length; i++){
  var btn = buttons[i];
  console.log(buttons[i].textContent);
  if(buttons[i].textContent == "E"){
  	alert("Found it");
  }
  else{
  	alert(buttons[i].textContent + "NOPE!");
  }
  btn.addEventListener("click", function() {
    document.getElementByTag("button").value += this.innerHTML;
  });
}