Troubles with javascript calculator functions not being called

Question

Note: the problem seems to be mainly caused by the program being unable to call the functions correctly, as changing them to just be 'alert()' made them all work fine.

I recently wanted to make a calculator on an html page using javascript, which was going fine until I noticed that after I finished, the buttons didn't actually do anything. After some troubleshooting (that's why the alert()s are in the functions, I figured out that my functions weren't being correctly called. I'm not quite sure what I'm doing wrong, so I need some help. Here's the code:

<html>
<head>
<title>
Web calculator
</title>
<script language="JavaScript">
<!--
var num1="", num2="", operation="", solution=0;

function clear(){
    alert()
    window.document.calculator.display.value="CLEAR";
    window.document.calculator.display.size=5;
    operation="";
    solution=0;
    num1="";
    num2="";
}
function addNumber(number){
    alert();
    window.document.calculator.display.value+=number;
    window.document.calculator.display.size+=1;
    if(operation.length>0){
        num2+=number;
    }
    else if(operation.length==0){
        num1+=number;
    };
}
function addOperation(op){
    alert()
    operation=op;
    var value = window.document.calculator.display.value;
    if((parseInt(value.indexOf('+')) + parseInt(value.indexOf('-')) + parseInt(value.indexOf('/')) + parseInt(value.indexOf('*')))!=-4){
        window.document.calculator.display.size+=1;
        window.document.calculator.display.value+=operation;
    else{
        window.document.calculator.display.value-="-";
        window.document.calculator.display.value-="+";
        window.document.calculator.display.value-="/";
        window.document.calculator.display.value-="*";
        window.document.calculator.display.value=num1+operation+num2;
    };
}
function solve(){
    alert()
    num1=num1.parseFloat(num1);
    num2=num2.parseFloat(num2);
    switch(operation){
        ('+'){
            solution=num1+num2;
        }
        ('-'){
            solution=num1-num2;
        }
        ('*'){
            solution=num1*num2;
        }
        ('/'){
            solution=num1/num2;
        }
    };
    window.document.calculator.display.value=solution;
}
-->
</script>
</head>
<body onLoad="clear();">
<br><br><br><br><br><br><br><br>
<center>
<form name="calculator">
    <table border=5>
        <tr>
            <center>
            <td colspan=3>
                <input type="text" name="display" readonly value="" size="5">
            </td>
            <td>
                <input type="button" name="buttonclear" readonly value="C" onClick="clear();">
            </td>
            </center>
        </tr>
        <tr>
            <center>
            <td>
            <input type="button" name="buttonseven" readonly value="7" onClick="addNumber('7');">
            </td>
            <td>
            <input type="button" name="buttoneight" readonly value="8" onClick="addNumber('8');">
            </td>
            <td>
            <input type="button" name="buttonnine" readonly value="9" onClick="addNumber('9' /*this part is fixed due to a below comment, however it was not the culprit of the problem*/);">
            </td>
            <td>
            <input type="button" name="buttonminus" readonly value="-" onClick="addOperation('-');">
            </td>
            </center>
        </tr>
        <tr>
            <center>
            <td>
            <input type="button" name="buttonfour" readonly value="4" onClick="addNumber('4');">
            </td>
            <td>
            <input type="button" name="buttonfive" readonly value="5" onClick="addNumber('5');">
            </td>
            <td>
            <input type="button" name="buttonsix" readonly value="6" onClick="addNumber('6');">
            </td>
            <td>
            <input type="button" name="buttonplus" readonly value="+" onClick="addOperation('+');">
            </td>
            </center>
        </tr>
        <tr>
            <center>
            <td>
            <input type="button" name="buttonone" readonly value="1" onClick="addNumber('1');">
            </td>
            <td>
            <input type="button" name="buttontwo" readonly value="2" onClick="addNumber('2');">
            </td>
            <td>
            <input type="button" name="buttonthree" readonly value="3" onClick="addNumber('3');">
            </td>
            <td>
            <input type="button" name="buttontimes" readonly value="*" onClick="addOperation('*');">
            </td>
            </center>
        </tr>
        <tr>
            <center>
            <td>
            <input type="button" name="buttondot" readonly value="." onClick="addNumber('.');">
            </td>
            <td>
            <input type="button" name="buttonzero" readonly value="0" onClick="addNumber('0');">
            </td>
            <td>
            <input type="button" name="buttonequals" readonly value="=" onClick="solve();">
            </td>
            <td>
            <input type="button" name="buttondivide" readonly value="/" onClick="addOperation('/');">
            </td>
            </center>
        </tr>
    </table>
</form>
</center>
</body>
</html>

score 1 · Accepted Answer · answered Apr 22 '17 at 00:50

1

You've got several issues. Open the dev tools from your modern browser by pressing f12 while the code is running.

You're missing a } before your else in the addOperation function.

And here's the appropriate way to use a switch in js:

switch(expression) {
    case n:
        code block
        break;
    case n:
        code block
        break;
    default:
        code block
}

answered Apr 22 '17 at 00:50

Timothy Kanski

1,861
14
20

Also, try coding in a legitimate IDE like Visual Studio, and you'll avoid these issues. – Timothy Kanski Apr 22 '17 at 00:51
1

Yeah, I use notepad++ because it's convenient – Apr 22 '17 at 00:52
@Timothy, that's a bit overkill. – Pyromonk Apr 22 '17 at 00:52
@Pyromonk I disagree entirely. VS offer intellisense and addons like JSLint. Try using JSLint in Notepad++ – Timothy Kanski Apr 22 '17 at 00:54
@Pyromonk I'm just saying that if I was going to get into a fist fight, I'd prefer to be driving an army tank. There's no good reason not to use the best tools available. Especially when the army tank is free. – Timothy Kanski Apr 22 '17 at 01:02

score 0 · Answer 2 · answered Apr 22 '17 at 00:47

0

There is an unclosed ' in one of the onClick functions:

<input type="button" name="buttonnine" readonly value="9" onClick="addNumber('9);">

Changing it to onClick="addNumber('9');"

may fix it.

answered Apr 22 '17 at 00:47

Totò

1,824
15
20

The problem, from what I remember, happened by calling functions above that position too, but thanks for the help with that one – Apr 22 '17 at 00:50
1

@brandonw The problem is you not knowing how to open the browser console - that would help immensely in locating such JS errors – nicholaswmin Apr 22 '17 at 00:51

score 0 · Answer 3 · edited May 23 '17 at 12:25

0

I've input your code into a JSFiddle, and clear and addNumber are not defined, in addition to the syntax problems other people have mentioned. You need to check if the document is ready before functions are run: if an element has not been loaded when a function tries to access it, it will throw an error.

On another note, the window object is not required to access elements that are part of the original DOM.

Additionally, as others have noted, it is very important to use your browser's console (normally F12/Ctrl+Shift+J) to debug JavaScript. The days of depending on alerts are long gone.

edited May 23 '17 at 12:25

Community

1
1

answered Apr 22 '17 at 00:52

Pyromonk

684
1
12
27

1

*"I've input your code into a JSFiddle, and clear and addNumber are not defined"* It's nothing to do with the OP's code. That's because of jsFiddle's surprising default of wrapping all the code in the JavaScript panel inside a `window.onload = function() { };` wrapper. Click the word "JavaScript" for a menu that lets you fix that. – T.J. Crowder Apr 22 '17 at 10:21
@T.J.Crowder, thank you, I really appreciate your input. – Pyromonk Apr 22 '17 at 11:12

Troubles with javascript calculator functions not being called

3 Answers3