变量不能正确显示(和添加)

Variable not displaying (and adding) properly

本文关键字：添加 显示 不能 变量      更新时间：2023-09-26

大家好。我通过制作一个小计算器来练习我的javascript技能。我遇到的问题是，基本上称为sum的变量，它包含用户输入并显示在页面上，不能正确显示。它从零开始。

当我加上2时，我得到02作为输出。再加上2，而不是4，得到022。我把整个源代码贴在下面。

<!DOCTYPE HTML>
<head>
<title>Screw arround!</title>
<style>
    .btn{
        width : 50px;
        height:50px;
    }
    .btn2{
        width : 200px;
        height:50px;
    }
    .btn3{
        width : 200px;
        height:25px;
    }
</style>
</head>
<body>
    <center>
        <p id="asd"></p>
        <input type="number" id="textField" class="btn3"></input></br>
        <button id="add" onclick="compute(this.id)" class="btn">+</button><button id="subtract" onclick="compute(this.id)" class="btn">-</button>
        <button id="multiply" onclick="compute(this.id)" class="btn">*</button><button id="divide" onclick="compute(this.id)" class="btn">/</button></br>
        <button id="clear" onclick="compute(this.id)" class="btn2">Clear</button>
    </center>
</body> 
<script>
//----- variables
var sum = 0; // sum
var refr = document.getElementById("textField"); // get a referance to the textField
function compute(id)
{
    if(id === "add")
    { 
        sum += refr.value;;
        console.log(sum);
    }
    else if(id === "subtract")
    {
        sum -= refr.value;
        console.log(sum);
    }
    else if(id === "multiply")
    {
        sum *= refr.value;
        console.log(sum);
    }
    else if(id === "divide")
    {
        sum /= refr.value;
        console.log(sum);
    }
    //// set paragraph to the answer
    document.getElementById("asd").innerHTML = sum;
    if(id === "clear")
    {
        // make the values zero so new calculations can begin
        sum = 0;
        refr.value = '0';
        document.getElementById("asd").innerHTML = "";
    }
}
</script>

在您的compute函数中试试:

sum += parseInt(refr.value);

甚至parseFloat，如果你想:

sum += parseFloat(refr.value);

注意输入字段的value是字符串，+=value实际上是字符串拼接而不是代数计算

相关文章：