单击按钮以用值填充 div，然后将此值用于 onclick 函数 - Javascript

Question

我这里有一个文本框，当我单击它并按一个字母时，它会填充该字母。然后我单击一个按钮 (Go)，该按钮接受我输入的字母并运行一个有效的 JavaScript 函数。这是代码：

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

我想构建一个屏幕键盘，而不是单击文本框来输入字母，用户按下代表该字母的按钮，该字母就会填充文本框。然后，用户将单击“执行”来运行该函数。

我构建了以下作为键盘：

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

并有此代码：

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

当我单击字母按钮时，没有任何反应。 但是，如果我改变：

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

至：

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

该字母按照我想要的方式填充在 div 中 - 但“执行”按钮功能不再起作用。

如何让字母填充 div，然后使用此按钮的其他功能才能工作？

Answer 1

innerHTML 和 value 之间是有区别的。

InnerHTML 通常是 HTML 代码。

<div></div>

中间可以包含 HTML 代码，因此在

innerHTML

上使用

div

是正确的。

在

input

中，如果你想给

input

的文本分配一些东西，你应该使用

value

的

input

。

如何修复：

选择以下两种情况之一。

如果你使用

div

，

innerHTML

就可以，但是你需要将

Go按钮

中的value更改为

innerHTML

，否则正如你所说，它不会生效。

如果您使用

input

，则

Go 按钮

中的 value 是正确的。您需要将

innerHTML

中的所有

function setLetter

更改为

value

。