为什么函数在我的计算器中不能正常工作？

Question

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

当点击数字时它似乎工作正常，同时添加 gets 以清除显示并且（我认为）它将值存储在它的变量（operandA）中但没有让其余的工作，也没有其余的操作数或“等于”按钮。

我有这个 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样式sheet

.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;
}

Answer 1

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

我在回答中附上了您的代码片段。我认为您还错过了代码中的 modulo operator 案例。它什么也没做。

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>

Answer 2

这将是漫长而费力的。你应该从简化代码开始，
例如改变 :
result.textContent = result.textContent + "7"
至
result.textContent += "7"

您也有兴趣利用 数据属性 以及 事件委托

您将能够更好地校对您的代码并使其在更健康的基础上进步。

并且您个人也应该对文体问题感兴趣：

const
  result           = document.getElementById('result')
, parenthesisOpen  = document.getElementById('parenthesisOpen')
, parenthesisClose = document.getElementById('parenthesisClose')
, percent          = document.getElementById('percent')
, allClear         = document.getElementById('allClear')
, zero             = document.getElementById('zero')
, one              = document.getElementById('one')
, two              = document.getElementById('two')
, three            = document.getElementById('three')
, four             = document.getElementById('four')
//...
  ;


seven.onclick =()=> result.textContent += '7';

事件委托更短的示例代码

document.querySelector('#buttons').onclick = ({target}) =>
  {
  if (target.matches('[data-val]'))
    console.log(`typed value is ${target.dataset.val}` ) 
    
  if (target.matches('[data-ope]')) 
     console.log(`typed command is ${target.dataset.ope}` ) 
  }

<div id="buttons">
  <button data-val="1">1</button>
  <button data-val="2">2</button>
  <button data-val="3">3</button>
  <button data-ope="addition">+</button>
  <button data-ope="subtract">-</button>
</div>

为什么函数在我的计算器中不能正常工作？

Why functions are not working properly in my calculator?

html

javascript

css

calculator