Question

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

当我添加2时，我得到02作为输出。当我再次添加2时，我得到了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>

Answer 1

在compute函数中尝试此操作：

sum += parseInt(refr.value);

如果您愿意，甚至可以parseFloat：

sum += parseFloat(refr.value);

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

变量不正确显示（和添加）

1 个答案: