Button isn't calling function

Question

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.

score 2 · Answer 1 · answered Jul 03 '15 at 23:59

2

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

Renaming clear() function is all needed.

function clearAll() {
  str = "<br>";
  input.innerHTML = str;
}

answered Jul 03 '15 at 23:59

marizikmund

398
1
6

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?](http://stackoverflow.com/questions/7165570/is-clear-a-reserved-word-in-javascript?) ;) – bgoldst Jul 04 '15 at 00:26
Alright, for no particular reason, +1 from me too. ;) – bgoldst Jul 04 '15 at 00:33

score 0 · Answer 2 · answered Jul 03 '15 at 23:36

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.

score 0 · Accepted Answer · edited May 23 '17 at 11:51

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?.

Button isn't calling function

3 Answers3