Clicking a button to populate a div with value, and then use this value for an onclick function – Javascript

I have a text box here which when I click into it and press a letter, it populates with that letter. Then I click a button (Go) which takes the letter I have entered and runs a JavaScript function that works. This is the code:

<div id="enterlettertext">
  Enter the letter:&nbsp;
  <input type="text" id="myletterInput" name="myletterInput" />
</div>
<input type="button" id="wadgo" value="Go" 
   onclick="QuizAnswer(document.getElementById('myletterInput').value)">

Rather than clicking into the text box to enter a letter, I want to build an onscreen keyboard where the user presses the button representing the letter and this letter populates the text box. The user would then click ‘Go’ to run the function.

I built the following as the keyboard:

<button class="fiveninebutton" onclick="setLetter('q');">Q</button>
<button class="fiveninebutton" onclick="setLetter('w');">W</button>
<button class="fiveninebutton" onclick="setLetter('e');">E</button>
<button class="fiveninebutton" onclick="setLetter('r');">R</button>

And have this code:

function setLetter(letter) {
  document.getElementById('myletterInput').innerHTML =    
  document.getElementById('myletterInput').innerHTML + letter;
}

When I click the letter button, nothing happens. However, if I change:

<input type="text" id="myletterInput" name="myletterInput" /> 

to:

<div id="myletterInput" name="myletterInput"></div>

the letter is populated in the div just as I want it to – but the ‘go’ button function no longer works.

How do I get the letter to populate the div and then the other function which uses this button to work?