Question

你好我新的和学习javascript。

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

上的html代码

我需要知道的是如何在P标记的文本字段和diplay输出中接受用户输入。

<!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>

Answer 1

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

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

    document.getElementById('result').innerHTML = parseInt(value1) + parseInt(value2);
}

Answer 2

获取文本框值的属性为value，而不是innerHTML，因此请更改这些属性，并且还需要使用eval或parseInt文本框值，否则它会将它们连接成字符串。

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

请参阅更新小提琴here。

Answer 3

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

var value1 = parseInt(document.getElementById('value1').value);
var value2 = parseInt(document.getElementById('value2').value);

Answer 4

您只读取一次值，您应该在输出函数中读取它们; 您需要将它们解析为整数，因为如果使用字符串，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>

Answer 5

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

Answer 6

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

const value1 = document.getElementById('value1').innerHTML.value * 1;
const value2 = document.getElementById('value2').innerHTML.value * 1;
document.getElementById('result').innerHTML = value1 + value2;

基本的Javascript数学文本字段

6 个答案: