html input display,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. 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?

Sum

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;

}

+

回答1:

innerHTML sets 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.

For your case you want to set the value of an input element. So you should use the value attribute.

Change innerHTML to value

document.getElementById('add').value = sum;

回答2:

Sum

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;

}

+

This should work properly.

1. use .value instead of "innerHTML" when setting the 3rd field (input field)

2. Close the input tags

回答3:

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;

回答4:

With .value and INPUT tag

Sum

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;

}

+

with innerHTML and DIV

Sum

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;

}

+

来源：https://stackoverflow.com/questions/11041201/html-display-result-in-text-input-field