Javascript Calculator returns Undefined as the result

October 20, 2022

I am trying to make a calculator using JavaScript, but no matter what I try the ‘operate’ function returns Undefined, and I have no clue why. I think it might have something to do with the fact that the switch statement always falls to default, no matter what.

I have tried manually calling the ‘operate’ function through the console, changing the ‘switch’ statement to an ‘if’ statement, turning num1 and num2 to integers, but to no avail.

Here is the code:

let textbar = document.getElementById('numberfield')
let numberContainer = document.getElementById('numberContainer').childNodes
let operationContainer = document.getElementById('operationContainer').childNodes
let operationContainerTwo = document.getElementById('operationContainerTwo').childNodes
let clear = document.getElementById('clear')
let equals = document.getElementById('equals')
let number1 = 0
let number2 = 0
let isSecondNumber = false
let operator = ''

window.onload = textbar.value = null

function add(numb1, numb2) {
    return Number(numb1)+Number(numb2)
}
function subtract(numb1, numb2) {
    return(parseFloat(numb1)-parseFloat(numb2))
}
function multiply(numb1, numb2) {
    return(parseInt(numb1)*parseInt(numb2))
}
function divide(numb1, numb2) {
    return(parseInt(numb1)/parseInt(numb2))
}
function exponent(numb1, numb2){
    return(parseInt(numb1)**parseInt(numb2))
}
function operate(num1, num2, operation) {
    switch(operation){
        case '+':
            textbar.setAttribute('value', add(num1, num2));
            break
        case '-':
            textbar.setAttribute('value', subtract(num1, num2));
            break
        case 'x':
        case '*':
            textbar.setAttribute('value', multiply(num1, num2));
            break
        case '÷':
        case '/':   
            textbar.setAttribute('value', divide(num1, num2));
            break
        case '^':                       
            textbar.setAttribute('value', exponent(num1, num2));
            break
        default:
            console.log("error");
            console.log(operator);
    }
}
function writeNumber(){
    textbar.value += this.innerHTML
}
function operatorSelect(){
    operator = this.innerHTML
    number1 = Number(textbar.value)
    textbar.value = null
}
function clearOperator(){
    textbar.value = null
    number1 = 0
    number2 = 0
    operator = ''
}
function equalsOperator(){
    number2 = Number(textbar.value)
    textbar.value = operate(number1, operator, number2)
}
numberContainer.forEach(element => element.addEventListener('click', writeNumber))
operationContainer.forEach(element => element.addEventListener('click', operatorSelect))
operationContainerTwo.forEach(element => element.addEventListener('click', operatorSelect))
clear.removeEventListener('click', operatorSelect)
clear.addEventListener('click', clearOperator)
equals.removeEventListener('click', operatorSelect)
equals.addEventListener('click', equalsOperator)

*{
    margin: 0px;
    padding: 0px;
}
label{
    grid-area: numberfield;
}
form{
    grid-area: form;
}
input{
    color: white;
}
button{
    color: white;
    background-color: black;
}
div#numberContainer{
    grid-area: div;
    display: grid;
    grid-template-rows: 50px 50px 50px 50px;
    grid-template-columns: 50px 50px 50px;
}
div#operationContainer{
    grid-area: oper;
    display: grid;
    grid-template-rows: 50px 50px 100px;
    grid-template-columns: 50px;
}
div#operationContainerTwo{
    grid-area: oper2;
    display: grid;
    grid-template-rows: 50px 50px 50px;
    grid-template-columns: 50px;
}
div#calculatorContainer{
    background-color: black;
    color: white;
    display: grid;
    width: 260px;
    grid-template-areas: 
                'numberfield numberfield numberfield numberfield numberfield'
                'form form form form form'
                'div div div oper oper2'
                'div div div oper oper2'
                'div div div oper oper2'
                'div div div oper oper2'
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Calculator</title>
</head>
<body>
    <div id="calculatorContainer">
        <label for="numberfield">Calculator</label>
        <form><input type="text" readonly disabled id="numberfield"></form>
        <div id="numberContainer">
            <button>7</button><button>8</button><button>9</button>
            <button>4</button><button>5</button><button>6</button>
            <button>1</button><button>2</button><button>3</button>
            <button>0</button><button>00</button><button>.</button>
        </div>
        <div id="operationContainer">
            <button>÷</button>
            <button>x</button>
            <button>+</button>
        </div>
        <div id="operationContainerTwo">
            <button id="clear">ON/AC</button>
            <button>-</button>
            <button>^</button>
            <button id="equals">=</button>
        </div>
    </div>
</body>
<script type="text/javascript" src="script.js"></script>
</html>

>Solution :

operate does not return anything, but you tried to assign the result to the output

Order of arguments was wrong as well

let textbar = document.getElementById('numberfield')
let numberContainer = document.getElementById('numberContainer').childNodes
let operationContainer = document.getElementById('operationContainer').childNodes
let operationContainerTwo = document.getElementById('operationContainerTwo').childNodes
let clear = document.getElementById('clear')
let equals = document.getElementById('equals')
let number1 = 0
let number2 = 0
let isSecondNumber = false
let operator = ''

window.onload = textbar.value = null

function add(numb1, numb2) {
    return Number(numb1)+Number(numb2)
}
function subtract(numb1, numb2) {
    return(parseFloat(numb1)-parseFloat(numb2))
}
function multiply(numb1, numb2) {
    return(parseInt(numb1)*parseInt(numb2))
}
function divide(numb1, numb2) {
    return(parseInt(numb1)/parseInt(numb2))
}
function exponent(numb1, numb2){
    return(parseInt(numb1)**parseInt(numb2))
}
function operate(num1, operation, num2) {
    switch(operation){
        case '+':
            return add(num1, num2);
        case '-':
            return subtract(num1, num2);
        case 'x':
        case '*':
            return multiply(num1, num2);
        case '÷':
        case '/':   
            return divide(num1, num2);
        case '^':                       
            return exponent(num1, num2);
        default:
            console.log("error");
            console.log(operator);
    }
}
function writeNumber(){
    textbar.value += this.innerHTML
}
function operatorSelect(){
    operator = this.innerHTML
    number1 = Number(textbar.value)
    textbar.value = null
}
function clearOperator(){
    textbar.value = null
    number1 = 0
    number2 = 0
    operator = ''
}
function equalsOperator(){
    number2 = Number(textbar.value)
    textbar.value = operate(number1, operator, number2)
}
numberContainer.forEach(element => element.addEventListener('click', writeNumber))
operationContainer.forEach(element => element.addEventListener('click', operatorSelect))
operationContainerTwo.forEach(element => element.addEventListener('click', operatorSelect))
clear.removeEventListener('click', operatorSelect)
clear.addEventListener('click', clearOperator)
equals.removeEventListener('click', operatorSelect)
equals.addEventListener('click', equalsOperator)

*{
    margin: 0px;
    padding: 0px;
}
label{
    grid-area: numberfield;
}
form{
    grid-area: form;
}
input{
    color: white;
}
button{
    color: white;
    background-color: black;
}
div#numberContainer{
    grid-area: div;
    display: grid;
    grid-template-rows: 50px 50px 50px 50px;
    grid-template-columns: 50px 50px 50px;
}
div#operationContainer{
    grid-area: oper;
    display: grid;
    grid-template-rows: 50px 50px 100px;
    grid-template-columns: 50px;
}
div#operationContainerTwo{
    grid-area: oper2;
    display: grid;
    grid-template-rows: 50px 50px 50px;
    grid-template-columns: 50px;
}
div#calculatorContainer{
    background-color: black;
    color: white;
    display: grid;
    width: 260px;
    grid-template-areas: 
                'numberfield numberfield numberfield numberfield numberfield'
                'form form form form form'
                'div div div oper oper2'
                'div div div oper oper2'
                'div div div oper oper2'
                'div div div oper oper2'
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Calculator</title>
</head>
<body>
    <div id="calculatorContainer">
        <label for="numberfield">Calculator</label>
        <form><input type="text" readonly disabled id="numberfield"></form>
        <div id="numberContainer">
            <button>7</button><button>8</button><button>9</button>
            <button>4</button><button>5</button><button>6</button>
            <button>1</button><button>2</button><button>3</button>
            <button>0</button><button>00</button><button>.</button>
        </div>
        <div id="operationContainer">
            <button>÷</button>
            <button>x</button>
            <button>+</button>
        </div>
        <div id="operationContainerTwo">
            <button id="clear">ON/AC</button>
            <button>-</button>
            <button>^</button>
            <button id="equals">=</button>
        </div>
    </div>
</body>
<script type="text/javascript" src="script.js"></script>
</html>