Why functions are not working properly in my calculator?

Can you help me identify where’s the problem with this code? I’m a beginner at coding and very likely I’m missing something obvious, but here’s my problem.

When clicking on numbers it seems to work fine, also adding gets to clear the display and (I think) it stores the value in its variable (operandA) but not getting the rest to work, nor the rest of the operands nor the “equals” button.

I have this JS code:

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

And this HTML code:

<!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>

Of course, it’s not finished. My aim is to keep on adding features to it, so as to learn while tweaking it.

Thanks in advance!

PS: Yes, there is a raw style sheet in CSS:

.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

At a first glance, you had a syntax error inside your Javascript code. You were selecting the substract DOM element like this document.getElementById("substract") while in your HTML DOM you had it like this id="subtract"

I attached a snippet of your code in my answer. I think you also missed the modulo operator case in your code. It didn’t do nothing.

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>