Home > other >  Why functions are not working properly in my calculator?
Why functions are not working properly in my calculator?

Time：04-08

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 onl oad="init();">
    <!--Calculator's structure-->    
    <table >
        <!--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;
}

CodePudding user response：

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 onl oad="init();">
    <!--Calculator's structure-->    
    <table >
        <!--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>

CodePudding user response：

it will be long and laborious. you should start by simplifying your code,
for example changing :
result.textContent = result.textContent "7"
to
result.textContent = "7"

you would also be interested in taking advantage of the data attribute as well as the event delegation

You will be able to better proofread your code and make it progress on a healthier basis.

and personally you should also be interested in stylistic issues:

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

event delegation shorter sample code

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>

Page link：https//www.codepudding.com/other/364122.html

Prev:When click button change text in code tag
Next:How to get certain buttons on a html file to disappear and reappear
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding