javascript - 为什么我的计算器中的功能无法正常工作？

标签 javascript html css calculator

你能帮我找出这段代码的问题出在哪里吗？我是编码初学者，很可能我错过了一些明显的东西，但这是我的问题。

当单击数字时，它似乎工作正常，还添加了清除显示的内容，并且(我认为)它将值存储在其变量(操作数A)中，但没有让其余部分工作，也没有其余操作数或“等于”按钮。

我有这个 JS 代码:

function init(){
    //variables in the calculator
    var result = document.getElementById("result");
    var parenthesisOpen = document.getElementById("parenthesisOpen");
    var parenthesisClose = document.getElementById("parenthesisClose");
    var percent = document.getElementById("percent");
    var allClear = document.getElementById("allClear");
    var zero = document.getElementById("zero");
    var one = document.getElementById("one");
    var two = document.getElementById("two");
    var three = document.getElementById("three");
    var four = document.getElementById("four");
    var five = document.getElementById("five");
    var six = document.getElementById("six");
    var seven = document.getElementById("seven");
    var eight = document.getElementById("eight");
    var nine = document.getElementById("nine");
    var divide = document.getElementById("divide");
    var times = document.getElementById("times");
    var subtract = document.getElementById("substract");
    var float = document.getElementById("float");
    var equals = document.getElementById("equals");
    var add = document.getElementById("add");

    //events
    parenthesisOpen.onclick = function(e){
        result.textContent = result.textContent + "("
    }
    parenthesisClose.onclick = function(e){
        result.textContent = result.textContent + ")"
    }
    zero.onclick = function(e){
        result.textContent = result.textContent + "0"
    }
    one.onclick = function(e){
        result.textContent = result.textContent + "1"
    }
    two.onclick = function(e){
        result.textContent = result.textContent + "2"
    }
    three.onclick = function(e){
        result.textContent = result.textContent + "3"
    }
    four.onclick = function(e){
        result.textContent = result.textContent + "4"
    }
    five.onclick = function(e){
        result.textContent = result.textContent + "5"
    }
    six.onclick = function(e){
        result.textContent = result.textContent + "6"
    }
    seven.onclick = function(e){
        result.textContent = result.textContent + "7"
    }
    eight.onclick = function(e){
        result.textContent = result.textContent + "8"
    }
    nine.onclick = function(e){
        result.textContent = result.textContent + "9"
    }
    float.onclick = function(e){
        result.textContent = result.textContent + "."
    }
    allClear.onclick = function(e){
        clear();
    }
    add.onclick = function(e){
        operandA = result.textContent;
        operator = "+";
        clean();
    }
    subtract.onclick = function(e){
        operandA = result.textContent;
        operator = "-";
        clean();
    }
    times.onclick = function(e){
        operandA = result.textContent;
        operator = "x";
        clean();
    }
    divide.onclick = function(e){
        operandA = result.textContent;
        operator = "/";
        clean();
    }
    equals.onclick = function(e){
        operandB = result.textContent;
        solve();
    }

}
    //Auxiliar Variables
var operandA
var operandB
var operator

    //calculator functions
function clean(){
    result.textContent = "";
}

function clear(){
    result.textContent = "";
    operandA = 0;
    operandB = 0;
    operator = "";
}

function solve(){
    var sol = 0;
    switch(operator){
        case "+":
            sol = parseFloat(operandA) + parseFloat(operandB);
            break;
        
        case "-":
            sol = parseFloat(operandA) - parseFloat(operandB);
            break;
        
        case "x":
            sol = parseFloat(operandA) * parseFloat(operandB);
            break;
        
        case "/":
            sol = parseFloat(operandA) / parseFloat(operandB);
            break;
    }
    clear();
    result.textContent = sol;
}

这个 HTML 代码:

<!DOCTYPE html>
<html>
<head>
    <title>
            Calculator
    </title>
    <link type="text/css" href="style.css" rel="stylesheet">
</head>
<body onload="init();">
    <!--Calculator's structure-->    
    <table class="calculator">
        <!--Calculator's result display-->
    <tr>
        <td colspan="4"><span id="result"></span></td>
    </tr>
        <!--Calculator's buttons-->
    <tr>
        <td><button id="parenthesisOpen">(</button></td>
        <td><button id="parenthesisClose">)</button></td>
        <td><button id="percent">%</button></td>
        <td><button id="allClear">AC</button></td>
    </tr>
    <tr>
        <td><button id="seven">7</button></td>
        <td><button id="eight">8</button></td>
        <td><button id="nine">9</button></td>
        <td><button id="divide">/</button></td>
    </tr>
    <tr>
        <td><button id="four">4</button></td>
        <td><button id="five">5</button></td>
        <td><button id="six">6</button></td>
        <td><button id="times">x</button></td>
    </tr>
    <tr>
        <td><button id="one">1</button></td>
        <td><button id="two">2</button></td>
        <td><button id="three">3</button></td>
        <td><button id="subtract">-</button></td>
    </tr>
    <tr>
        <td><button id="zero">0</button></td>
        <td><button id="float">.</button></td>
        <td><button id="equals">=</button></td>
        <td><button id="add">+</button></td>
    </tr>
    </table>
<script type="text/javascript" src="function.js"></script>
</body>
</html>

当然，事情还没有结束。我的目标是不断地为其添加功能，以便在调整的同时学习。

提前致谢!

PS:是的，CSS中有一个raw样式表:

.calculator{
    display: block;
    margin: 0 auto;
    padding: 20px;
    background-color: rgb(207, 207, 207); 
    width: 340px;
    height: 580px;
    border-radius: 20px;
    box-shadow: 5px 5px 5px rgb(0, 0, 0);      
}

.calculator td button{
    display: block;
    background-color: rgb(161, 161, 161);
    text-align: center;
    width: 70px;
    height: 70px;
    font-size: 25px;
    border-radius: 100%;
    box-shadow: 2px 2px 2px rgb(0, 0, 0);
}
#equals{
    background-color: rgb(226, 189, 109);
}
#result{
    display: block;
    text-align: center;
    font-size: 40px;
    margin-bottom: 40px;
    width: 300px;
    height: 100px;
    line-height: 100px;
    background-color: aliceblue;
    border-radius: 15px;
    overflow-y:auto;
}

最佳答案

乍一看，您的 Javascript 代码中存在语法错误。您选择的是减去 DOM 元素，如下所示 document.getElementById("substract") 而在你的 HTML DOM 中你有这样的 id="subtract"

我在我的答案中附上了您的代码片段。我认为您还错过了代码中的模运算符情况。 它什么也没做。

function init(){
    //variables in the calculator
    var result = document.getElementById("result");
    var parenthesisOpen = document.getElementById("parenthesisOpen");
    var parenthesisClose = document.getElementById("parenthesisClose");
    var percent = document.getElementById("percent");
    var allClear = document.getElementById("allClear");
    var zero = document.getElementById("zero");
    var one = document.getElementById("one");
    var two = document.getElementById("two");
    var three = document.getElementById("three");
    var four = document.getElementById("four");
    var five = document.getElementById("five");
    var six = document.getElementById("six");
    var seven = document.getElementById("seven");
    var eight = document.getElementById("eight");
    var nine = document.getElementById("nine");
    var divide = document.getElementById("divide");
    var times = document.getElementById("times");
    var subtract = document.getElementById("subtract");
    var float = document.getElementById("float");
    var equals = document.getElementById("equals");
    var add = document.getElementById("add");

    //events
    parenthesisOpen.onclick = function(e){
        result.textContent = result.textContent + "("
    }
    parenthesisClose.onclick = function(e){
        result.textContent = result.textContent + ")"
    }
    zero.onclick = function(e){
        result.textContent = result.textContent + "0"
    }
    one.onclick = function(e){
        result.textContent = result.textContent + "1"
    }
    two.onclick = function(e){
        result.textContent = result.textContent + "2"
    }
    three.onclick = function(e){
        result.textContent = result.textContent + "3"
    }
    four.onclick = function(e){
        result.textContent = result.textContent + "4"
    }
    five.onclick = function(e){
        result.textContent = result.textContent + "5"
    }
    six.onclick = function(e){
        result.textContent = result.textContent + "6"
    }
    seven.onclick = function(e){
        result.textContent = result.textContent + "7"
    }
    eight.onclick = function(e){
        result.textContent = result.textContent + "8"
    }
    nine.onclick = function(e){
        result.textContent = result.textContent + "9"
    }
    float.onclick = function(e){
        result.textContent = result.textContent + "."
    }
    allClear.onclick = function(e){
        clear();
    }
    add.onclick = function(e){
        operandA = result.textContent;
        operator = "+";
        clean();
    }
    subtract.onclick = function(e){
        operandA = result.textContent;
        operator = "-";
        clean();
    }
    times.onclick = function(e){
        operandA = result.textContent;
        operator = "x";
        clean();
    }
    divide.onclick = function(e){
        operandA = result.textContent;
        operator = "/";
        clean();
    }
    equals.onclick = function(e){
        operandB = result.textContent;
        solve();
    }
     
    percent.onclick = function(e){
         operandA = result.textContent;
         operator = "%";
         clean();
    }

}
    //Auxiliar Variables
var operandA;
var operandB;
var operator;

    //calculator functions
function clean(){
    result.textContent = "";
}

function clear(){
    result.textContent = "";
    operandA = 0;
    operandB = 0;
    operator = "";
}

function solve(){
    var sol = 0;
    switch(operator){
        case "+":
            sol = parseFloat(operandA) + parseFloat(operandB);
            break;
        
        case "-":
            sol = parseFloat(operandA) - parseFloat(operandB);
            break;
        
        case "x":
            sol = parseFloat(operandA) * parseFloat(operandB);
            break;
        
        case "/":
            sol = parseFloat(operandA) / parseFloat(operandB);
            break;
         case "%":
            sol = operandA % operandB;
            break;
    }
    clear();
    result.textContent = sol;
}
.calculator{
    display: block;
    margin: 0 auto;
    padding: 20px;
    background-color: rgb(207, 207, 207); 
    width: 340px;
    height: 580px;
    border-radius: 20px;
    box-shadow: 5px 5px 5px rgb(0, 0, 0);      
}

.calculator td button{
    display: block;
    background-color: rgb(161, 161, 161);
    text-align: center;
    width: 70px;
    height: 70px;
    font-size: 25px;
    border-radius: 100%;
    box-shadow: 2px 2px 2px rgb(0, 0, 0);
}
#equals{
    background-color: rgb(226, 189, 109);
}
#result{
    display: block;
    text-align: center;
    font-size: 40px;
    margin-bottom: 40px;
    width: 300px;
    height: 100px;
    line-height: 100px;
    background-color: aliceblue;
    border-radius: 15px;
    overflow-y:auto;
}
<!DOCTYPE html>
<html>
<head>
    <title>
            Calculator
    </title>
    <link type="text/css" href="style.css" rel="stylesheet">
</head>
<body onload="init();">
    <!--Calculator's structure-->    
    <table class="calculator">
        <!--Calculator's result display-->
    <tr>
        <td colspan="4"><span id="result"></span></td>
    </tr>
        <!--Calculator's buttons-->
    <tr>
        <td><button id="parenthesisOpen">(</button></td>
        <td><button id="parenthesisClose">)</button></td>
        <td><button id="percent">%</button></td>
        <td><button id="allClear">AC</button></td>
    </tr>
    <tr>
        <td><button id="seven">7</button></td>
        <td><button id="eight">8</button></td>
        <td><button id="nine">9</button></td>
        <td><button id="divide">/</button></td>
    </tr>
    <tr>
        <td><button id="four">4</button></td>
        <td><button id="five">5</button></td>
        <td><button id="six">6</button></td>
        <td><button id="times">x</button></td>
    </tr>
    <tr>
        <td><button id="one">1</button></td>
        <td><button id="two">2</button></td>
        <td><button id="three">3</button></td>
        <td><button id="subtract">-</button></td>
    </tr>
    <tr>
        <td><button id="zero">0</button></td>
        <td><button id="float">.</button></td>
        <td><button id="equals">=</button></td>
        <td><button id="add">+</button></td>
    </tr>
    </table>
<script type="text/javascript" src="function.js"></script>
</body>
</html>

关于javascript - 为什么我的计算器中的功能无法正常工作？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/71780893/

上一篇：javascript - tsconfig.json : not input were found in config file?

下一篇：java - 相同通配符的下限和上限通用约束

相关文章：

javascript - 为什么我无法通过该事件？

javascript - 如何添加物化日期选择器

javascript - 错误: undefined in React useContext and useReducer

html - 如何在其他 div 中调整和定位 div

html - 将 <div> 对齐到顶部，一个对齐到表格的底部

javascript - Reactjs 滚动条从底部开始

javascript - 多个 Div 的动画

javascript - 将 jquery 过滤器应用于创建的 div？

html - 无法应用线性渐变

javascript - 带有可滚动图像的 Div

©2024 IT工具网  联系我们