Javascript HTML 在文本（输入）字段中显示结果？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11041201/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML display result in text (input) field?
提问by Ronaldinho Learn Coding
I have a simple HTML form, with 3 input field, when you hit = button, it suppose to add 2 numbers that you typed in the first 2 input fields and display result in 3rd filed. Is it possible to do that? (I need result in a box (or table) or some thing rather than in plain text). I try the following but doesn't work (it does nothing), can somebody help me?
我有一个简单的 HTML 表单，有 3 个输入字段，当您点击 = 按钮时，它假设添加您在前 2 个输入字段中输入的 2 个数字，并在第三个字段中显示结果。有可能这样做吗？（我需要一个盒子（或表格）或一些东西而不是纯文本的结果）。我尝试以下但不起作用（它什么也没做），有人可以帮助我吗？
<HTML>
<HEAD>
<TITLE>Sum</TITLE>
<script type="text/javascript">
function sum()
{
var num1 = document.myform.number1.value;
var num2 = document.myform.number2.value;
var sum = parseInt(num1) + parseInt(num2);
document.getElementById('add').innerHTML = sum;
}
</script>
</HEAD>
<BODY>
<FORM NAME="myform">
<INPUT TYPE="text" NAME="number1" VALUE=""> +
<INPUT TYPE="text" NAME="number2" VALUE="">
<INPUT TYPE="button" NAME="button" Value="=" onClick="sum()">
<INPUT TYPE="text" ID="add" NAME="result" VALUE="">
</FORM>
</BODY>
</HTML>
回答by Nathan Wall
innerHTMLsets the text (including html elements) inside an element. Normally we use it for elements like div, span etc to insert other html elements inside it.
innerHTML设置元素内的文本（包括 html 元素）。通常我们将它用于 div、span 等元素以在其中插入其他 html 元素。
For your case you want to set the value of an input element. So you should use the valueattribute.
对于您的情况，您要设置输入元素的值。所以你应该使用该value属性。
Change innerHTMLto value
更改innerHTML为value
document.getElementById('add').value = sum;
回答by geekoraul
<HTML>
<HEAD>
<TITLE>Sum</TITLE>
<script type="text/javascript">
function sum()
{
var num1 = document.myform.number1.value;
var num2 = document.myform.number2.value;
var sum = parseInt(num1) + parseInt(num2);
document.getElementById('add').value = sum;
}
</script>
</HEAD>
<BODY>
<FORM NAME="myform">
<INPUT TYPE="text" NAME="number1" VALUE=""/> +
<INPUT TYPE="text" NAME="number2" VALUE=""/>
<INPUT TYPE="button" NAME="button" Value="=" onClick="sum()"/>
<INPUT TYPE="text" ID="add" NAME="result" VALUE=""/>
</FORM>
</BODY>
</HTML>
This should work properly. 1. use .value instead of "innerHTML" when setting the 3rd field (input field) 2. Close the input tags
这应该可以正常工作。1. 在设置第三个字段（输入字段）时使用 .value 而不是 "innerHTML" 2. 关闭输入标签
回答by Rorrik
Do you really want the result to come up in an input box? If not, consider a table with borders set to other than transparent and use
您真的希望结果出现在输入框中吗？如果不是，请考虑将边框设置为透明以外的表格并使用
document.getElementById('sum').innerHTML = sum;
document.getElementById('sum').innerHTML = sum;
回答by Basavaraj Hadimani
With .value and INPUT tag
带有 .value 和 INPUT 标签
<HTML>
<HEAD>
<TITLE>Sum</TITLE>
<script type="text/javascript">
function sum()
{
var num1 = document.myform.number1.value;
var num2 = document.myform.number2.value;
var sum = parseInt(num1) + parseInt(num2);
document.getElementById('add').value = sum;
}
</script>
</HEAD>
<BODY>
<FORM NAME="myform">
<INPUT TYPE="text" NAME="number1" VALUE=""/> +
<INPUT TYPE="text" NAME="number2" VALUE=""/>
<INPUT TYPE="button" NAME="button" Value="=" onClick="sum()"/>
<INPUT TYPE="text" ID="add" NAME="result" VALUE=""/>
</FORM>
</BODY>
</HTML>
with innerHTML and DIV
使用 innerHTML 和 DIV
<HTML>
<HEAD>
<TITLE>Sum</TITLE>
<script type="text/javascript">
function sum()
{
var num1 = document.myform.number1.value;
var num2 = document.myform.number2.value;
var sum = parseInt(num1) + parseInt(num2);
document.getElementById('add').innerHTML = sum;
}
</script>
</HEAD>
<BODY>
<FORM NAME="myform">
<INPUT TYPE="text" NAME="number1" VALUE=""/> +
<INPUT TYPE="text" NAME="number2" VALUE=""/>
<INPUT TYPE="button" NAME="button" Value="=" onClick="sum()"/>
<DIV ID="add"></DIV>
</FORM>
</BODY>
</HTML>
