0

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

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

1 回答 1

2

compute在你的函数中试试这个：

sum += parseInt(refr.value);

或者即使parseFloat你想要：

sum += parseFloat(refr.value);

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

于 2013-06-13T09:45:54.893 回答