基本 Javascript 数学文本字段答案

【问题标题】：Basic Javascript math text field基本 Javascript 数学文本字段
【发布时间】：2011-06-18 11:48:51
【问题描述】：

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

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

查看js fiddlehttp://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>

【问题讨论】：

标签： javascript html css math addition

【解决方案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);
}

【讨论】：

【解决方案2】：

获取文本框值的属性是value，而不是innerHTML，所以更改它们，您还需要在文本框值上使用eval或parseInt，否则它将连接它们作为字符串。

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

见更新小提琴here。

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

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

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

【讨论】：