如何点击按钮填充div内容并在onclick函数中使用该值？（JavaScript）

核心问题 #

• 使用<input>时，setLetter函数修改innerHTML无效——输入框的内容存储在value属性而非innerHTML中
• 改成<div>后，<div>没有value属性，导致Go按钮里的document.getElementById('myletterInput').value无法获取内容，进而让QuizAnswer函数失效

方案1：最小改动适配div容器 #

如果你保留<div id="myletterInput">作为显示容器，只需修改Go按钮的取值逻辑，从获取value改为获取innerHTML：

<input type="button" id="wadgo" value="Go" 
   onclick="QuizAnswer(document.getElementById('myletterInput').innerHTML.trim())">

setLetter函数可直接保留（已正确修改div的显示内容）：

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

方案2：隐藏input存值（兼容原有QuizAnswer逻辑） #

如果不想修改QuizAnswer的参数来源，建议用隐藏input存储实际输入值，div仅做内容展示：

1. 修改HTML结构：

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

2. 更新setLetter函数：

function setLetter(letter) {
  const hiddenInput = document.getElementById('myletterInput');
  const displayDiv = document.getElementById('letterDisplay');
  // 更新隐藏input的实际值
  hiddenInput.value += letter;
  // 更新div的显示内容
  displayDiv.innerHTML += letter;
}

内容的提问来源于stack exchange，提问作者BarryG