HTML显示结果在文本（输入）字段？
[英]HTML display result in text (input) field?
问题描述
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. 
我有一个简单的HTML表单，有3个输入字段，当你点击=按钮时，它假设你在前2个输入字段中输入2个数字并在第3个字段中显示结果。 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>
<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>
4 个解决方案
解决方案1
9 已采纳 2012-06-14 20:56:49
innerHTML sets the text (including html elements) inside an element. innerHTML设置元素内的文本（包括html元素）。 Normally we use it for elements like div, span etc to insert other html elements inside it. 通常我们将它用于div，span等元素，以在其中插入其他html元素。
For your case you want to set the value of an input element. 对于您的情况，您要设置输入元素的值。 So you should use the value attribute. 所以你应该使用value属性。
Change innerHTML to value 将innerHTML更改为value
document.getElementById('add').value = sum;
解决方案2
4 2012-06-14 21:11:05
<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.设置第3个字段（输入字段）时使用.value而不是“innerHTML”2。关闭输入标签
解决方案3
3 2012-06-14 21:02:25
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;
解决方案4
0 2018-01-24 05:51:07
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.