如何将按钮的值打印到输入框的onclick功能？答案

【问题标题】：How to print value of button to input box onclick function?如何将按钮的值打印到输入框的onclick功能？
【发布时间】：2021-05-22 19:22:05
【问题描述】：

这里的按钮 '1' 在点击时在标记中显示值“1”，但第二个按钮 '2' 没有在输入框中显示值“2”。虽然两个功能是相同的。

//Working
function one1() {
  onee = document.getElementById("b1").value;
  document.getElementById("ptag").innerHTML += "1";
}
//Not Working
function one2() {
  twoo = document.getElementById("b2").value;
  document.getElementById("mydiv").innerHTML += "1";
}

<input type="number" id="mydiv"><br>
<button id="b1" value="1" onclick="one1()">1</button>
<button id="b2" value="2" onclick="one2()">2</button>
<br>
<p id="ptag">This is p tag</p>

【问题讨论】：

标签： javascript html button input calculator

【解决方案1】：

您的第二个功能是针对输入，而不是段落，因此 innerHTML 不是您想要的。你想要value

//Working
function one1() {
  onee = document.getElementById("b1").value;
  document.getElementById("ptag").innerHTML += "1";
}
//Not Working
function one2() {
  twoo = document.getElementById("b2").value;
  document.getElementById("mydiv").value += "1";
}

<input type="number" id="mydiv"><br>
<button id="b1" value="1" onclick="one1()">1</button>
<button id="b2" value="2" onclick="one2()">2</button>
<br>
<p id="ptag">This is p tag</p>

【讨论】：

【解决方案2】：

InnerHtml 属性在输入元素的情况下不起作用。输入元素不同于您的段落元素或任何其他可以包含任何其他 html 元素的元素。

那该怎么办？输入元素具有 value 属性，您可以通过该属性获取和设置输入元素的值。 document.getElementById("mydiv").value += "1";将为您完成这项工作。

另见 - https://www.w3schools.com/jsref/prop_html_innerhtml.asp https://www.w3schools.com/jsref/prop_node_innertext.asp

【讨论】：

【解决方案3】：

输入类型控件不使用innerHtml设置或获取值，需要访问控件的value属性。

innerhtml vs value in javascript

【讨论】：