1

I'm writing code for a simple calculator. Most of my buttons seem to be working and correctly calling functions, but for some reason my clear function isn't being called. The HTML for my buttons and input bar is:

<p id="input" style="border:1px solid black" style="width:100px"><br></p> <table> <tr> <td><button style="width:100%">m+</button></td> <td><button style="width:100%">m-</button></td> <td><button style="width:100%">mc</button></td> <td><button style="width:100%" onclick='memory("mr")'>mr</button></td> <td><button onclick="clear()" style="width:100%">c</button></td> </tr> <tr> <td><button onclick="addChar('7')" style="width:100%">7</button></td> <td><button onclick="addChar('8')" style="width:100%">8</button></td> <td><button onclick="addChar('9')" style="width:100%">9</button></td> <td><button onclick="setOperator('/')" colspan="2" style="width:200%">/</button></td> </tr> <tr> <td><button onclick="addChar('4')" style="width:100%">4</button></td> <td><button onclick="addChar('5')" style="width:100%">5</button></td> <td><button onclick="addChar('6')" style="width:100%">6</button></td> <td><button onclick="setOperator('*')" colspan="2" style="width:200%">*</button></td> </tr> <tr> <td><button onclick="addChar('1')" style="width:100%">1</button></td> <td><button onclick="addChar('2')" style="width:100%">2</button></td> <td><button onclick="addChar('3')" style="width:100%">3</button></td> <td><button onclick="setOperator('-')" colspan="2" style="width:200%">-</button></td> </tr> <tr> <td><button style="width:100%">+/-</button></td> <td><button onclick="addChar('0')" style="width:100%">0</button></td> <td><button onclick="addChar('.')" style="width:100%">.</button></td> <td><button onclick="calculate()" style="width:100%">=</button></td> <td><button onclick="setOperator('+')" style="width:100%">+</button></td> </tr> </table>

These buttons then call their respective functions:

<script> var str = ""; var operand1 = 0; var operand2 = 0; var op = ""; var mem = 0; var input = document.getElementById("input"); function addChar(char) { str += char; input.innerHTML = str; } function clear() { str = ""; input.innerHTML = "<br>"; } function setOperator(operator) { op = operator; operand1 = str; str = ""; input.innerHTML = "<br>"; } function calculate() { operand2 = str; if (op === "+") { str = ((+operand1) * 10 + (+operand2) * 10)/10; } else if (op === "-") { str = (operand1 - operand2); } else if (op === "*") { str = (operand1 * operand2); } else if (op === "/") { str = (operand1 / operand2); } input.innerHTML = str; } </script>

The button labeled "c" should call my function "clear()", but the "onclick" event never seems to occur. There's a good chance that there's just some typo that I'm too inexperienced to find. Any help is appreciated.

Improve this question

3 Answers 3

Reset to default
2

Working solution: http://jsfiddle.net/b9h7L3av/

Renaming clear() function is all needed.

function clearAll() { str = "<br>"; input.innerHTML = str; }
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Who's the jackass who voted for this answer which is a cheap knockoff of my answer, rather than voting for my answer which is a cheap knockoff of Is "clear" a reserved word in Javascript? ;)
Alright, for no particular reason, +1 from me too. ;)
0

You've run into an obscure quirk of JavaScript that occurs when you use inline event handlers with a used-defined function named clear(). There is a document.clear() function which, in the context of inline JavaScript, happens to be hit first in the scope chain, so that is what is invoked by your clear() call, not your global window.clear() function.

You can prove this by replacing your clear() call with alert(clear === document.clear);, which alerts true.

You can solve the problem by either explicitly qualifying the call, i.e. window.clear() instead of clear(), or by renaming the function. But, it should be mentioned that you should look into replacing your inline event handlers with pure JavaScript event handler registration, which is considered preferable, since it more effectively separates presentation from logic.

See Is "clear" a reserved word in Javascript?.

Improve this answer

Comments

0

The inline onclick handler expects the function to be loaded before it is set. I assume you are loading the html before the js. If not, then it expects the function to be part of the global object, which is window.

Try assinging your function like this:

 window.addChar = function addChar(char) { ... };

It's often better to assign click handlers using the addEventListenermethod.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.