基本Javascript数学文本字段_Javascript_Html_Css_Math_Addition

基本Javascript数学文本字段

javascript html css math

基本Javascript数学文本字段,javascript,html,css,math,addition,Javascript,Html,Css,Math,Addition,你好，我是新来的，正在学习javascript 我正试图通过文本字段制作一个加法程序检查js FIDLE上的html代码我需要知道的是如何在文本字段中接受用户输入，并在p标记中显示输出 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>untitled</title> </head> <body&g

你好，我是新来的，正在学习javascript

我正试图通过文本字段制作一个加法程序

检查js FIDLE上的html代码

我需要知道的是如何在文本字段中接受用户输入，并在

标记中显示输出

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


无标题
+ 

var value1=document.getElementById（'value1'）.innerHTML；
var value2=document.getElementById（'value2'）.innerHTML；
函数输出（）{
document.getElementById（'result'）.innerHTML=value1+value2；
}

您必须在单击按钮后获取输入字段中的值，并使用

值

属性（而不是innerHTML）执行此操作。此外，请确保您正在添加数字，而不是将字符串附加在一起。试试这个：

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

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

获取文本框值的属性是

value

，而不是

innerHTML

，因此更改这些属性，您还需要对文本框值使用

eval

或

parseInt

，否则它会将它们作为字符串连接起来

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

请参阅更新fiddle。

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

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

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


函数输出（）{
var value1=parseInt（document.getElementById（'value1'）.value）；
var value2=parseInt（document.getElementById（'value2'）.value）；
document.getElementById（'result'）.innerHTML=value1+value2；
}

为了完整性：您的脚本可能会更好。基于您的表单，我制作了另一个。

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

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

成功了，谢谢。