4

你好，我是新手，正在学习 javascript。

我正在尝试通过文本字段制作一个添加程序。

检查 js fiddle http://jsfiddle.net/fCXMt/上的 html 代码

我需要知道的是如何在文本字段中接受用户输入并在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>
4

6 回答 6

3

您必须在单击按钮后获取输入字段中的值，并使用value属性（而不是 innerHTML）来执行此操作。另外，请确保您添加数字而不是将字符串附加在一起。尝试这个：

function output(){
    var value1 = document.getElementById('value1').value;
    var value2 = document.getElementById('value2').value;

    document.getElementById('result').innerHTML = parseInt(value1) + parseInt(value2);
}
于 2011-06-18T11:52:33.150 回答
2

获取文本框值的属性是value, not innerHTML，因此更改它们，您还需要在文本框值上使用evalor parseInt，否则会将它们连接为字符串。

此外，您需要在函数内移动变量声明，以便在调用函数时，从文本框中检索当前值。

请参阅此处的更新小提琴。

于 2011-06-18T11:54:19.923 回答
1

您需要访问输入字段的“值”属性并将它们解析为整数：

var value1 = parseInt(document.getElementById('value1').value);
var value2 = parseInt(document.getElementById('value2').value);
于 2011-06-18T11:54:22.233 回答
1

您只读取一次值，您应该在输出函数中读取它们；您还需要将它们解析为整数，因为如果使用字符串，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>
于 2011-06-18T11:54:53.107 回答
1

为了完整性：您的脚本可能会更好。根据您的表格，我制作了另一个jsfiddle 示例。

于 2011-06-18T13:36:38.973 回答
0

在获取值时，只需将其乘以 1，它就会将值解析为数字

const value1 = document.getElementById('value1').innerHTML.value * 1;
const value2 = document.getElementById('value2').innerHTML.value * 1;
document.getElementById('result').innerHTML = value1 + value2;
于 2018-03-30T19:48:18.497 回答