基本的 Javascript 数学文本字段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6395777/
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
Basic Javascript math text field
提问by kevvvin
hello im new and learning javascript.
你好，我是新手，正在学习 javascript。
I'm trying to make a program of addition through text field.
我正在尝试通过文本字段制作一个加法程序。
Check the html code on js fiddle http://jsfiddle.net/fCXMt/
检查 js fiddle http://jsfiddle.net/fCXMt/上的 html 代码
What I need to know is how can I accept user input in text field and diplay output in Ptag.
我需要知道的是如何在文本字段中接受用户输入并在P标签中显示输出。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>untitled</title>
</head>
<body>
<input id="value1" type="text" />
<span> + </span>
<input id="value2" type="text" />
<input type="submit" onclick="output();">
<p id="result"> </p>
<script type="text/javascript" language="javascript" charset="utf-8">
var value1 = document.getElementById('value1').innerHTML;
var value2 = document.getElementById('value2').innerHTML;
function output(){
document.getElementById('result').innerHTML = value1 + value2;
}
</script>
</body>
</html>
采纳答案by James Allardice
The property for getting the value of a textbox is value, not innerHTML, so change those, and you will also need to use evalor parseInton the textbox values, otherwise it will concatenate them as strings.
获取文本框值的属性是value，不是innerHTML，因此更改它们，并且您还需要在文本框值上使用eval或parseInt，否则会将它们连接为字符串。
Also, you need to move your variable declarations inside the function, so that when the function is called, the current values from the textboxes are retreived.
此外，您需要在函数内移动变量声明，以便在调用函数时，检索文本框中的当前值。
See update fiddle here.
请参阅此处的更新小提琴。
回答by Kon
You have to grab the values in input fields after the button click, and use the valueproperty (not innerHTML) to do it. Also, make sure you're adding numbers and not appending strings together. Try this:
您必须在单击按钮后获取输入字段中的值，并使用value属性（而不是 innerHTML）来执行此操作。另外，请确保您添加数字而不是将字符串附加在一起。试试这个：
function output(){
var value1 = document.getElementById('value1').value;
var value2 = document.getElementById('value2').value;
document.getElementById('result').innerHTML = parseInt(value1) + parseInt(value2);
}
回答by jbachman
You need to access the "value" property of the input fields and parse them as integers:
您需要访问输入字段的“值”属性并将它们解析为整数：
var value1 = parseInt(document.getElementById('value1').value);
var value2 = parseInt(document.getElementById('value2').value);
回答by fijter
You only read the values once, you should read them in the output function; You need to parse them to integers as well since 1+4 will become 14 if you use strings. Could be better but this should work.
你只读取一次值，你应该在输出函数中读取它们；您还需要将它们解析为整数，因为如果使用字符串，1+4 将变为 14。可能会更好，但这应该有效。
<script type="text/javascript" language="javascript" charset="utf-8">
function output(){
var value1 = parseInt(document.getElementById('value1').value);
var value2 = parseInt(document.getElementById('value2').value);
document.getElementById('result').innerHTML = value1 + value2;
}
</script>
回答by KooiInc
For completeness: your scripting could be better. Based on your form I cooked up another jsfiddle example.
为了完整性：您的脚本可能会更好。根据您的表单，我编写了另一个jsfiddle 示例。
回答by Rushikesh Bharad
While getting value, just multiple it by 1, it will parse the value into number
在获取值时，只需将其乘以 1，它就会将值解析为数字
const value1 = document.getElementById('value1').innerHTML.value * 1;
const value2 = document.getElementById('value2').innerHTML.value * 1;
document.getElementById('result').innerHTML = value1 + value2;
