Why is my javascript button click not working?

Question

I made a document where clicking on the CLR button should call the function clear() from the calc.js file and set the innerHTML of the cell of the table marked as "disp" to 80085. It's not working as I had thought it to. Why is it not working? Below are my codes.

function clear() {
  var disp = document.getElementById('disp');
  disp.innerHTML = "80085";
}

//function number('s') {
//  
//}
//the number function has yet to be implemented

table {
  border-collapse: collapse;
}

#display {
  background-color: lightgray;
}

button {
  width: 100%;
  background-color: white;
  border: 1px solid #008CBA;
  border-radius: 2px;
  transition-duration: 0.1s;
}

button:hover {
  background-color: #008CBA;
  color: white;
}

button:active {
  background-color: #007ea7;
  border: 1px solid #007ea7;
}

<!DOCTYPE html>
<html>

  <head>
    <script src="calc.js" type="text/javascript"></script>
    <link href="calc.css" rel="stylesheet" type="text/css" />
    <meta charset="utf-8">
    <title>Simple Calculator</title>
  </head>

  <body>
    <table>
      <tr>
        <td colspan="3" id="disp">0</td>
        <td><button onclick="clear();">CLR</button></td>
      </tr>

      <tr>
        <td><button onclick="number("7");">7</button></td>
        <td><button onclick="number("8");">8</button></td>
        <td><button onclick="number("9");">9</button></td>
        <td><button onclick="">/</button></td>
      </tr>

      <tr>
        <td><button onclick="number("4");">4</button></td>
        <td><button onclick="number("5");">5</button></td>
        <td><button onclick="number("6");">6</button></td>
        <td><button onclick="">*</button></td>
      </tr>

      <tr>
        <td><button onclick="number("1");">1</button></td>
        <td><button onclick="number("2");">2</button></td>
        <td><button onclick="number("3");">3</button></td>
        <td><button onclick="">-</button></td>
      </tr>

      <tr>
        <td><button onclick="number("7");">0</button></td>
        <td><button onclick="">.</button></td>
        <td><button onclick="">=</button></td>
        <td><button onclick="">+</button></td>
      </tr>
    </table>
  </body>

</html>

All and nay hep would be appreciated!

Possible duplicate of [Is "clear" a reserved word in Javascript?](http://stackoverflow.com/questions/7165570/is-clear-a-reserved-word-in-javascript) — Frxstrem, Oct 15 '16 at 08:59
as pointed by other user clear is reserved word so you goota change to something else for your function....also note :you are calling function in onclick with double quotes also using the same for param will cause further problem so try something like onclick="number('7')" — RohitS, Oct 15 '16 at 09:00

score 2 · Accepted Answer · edited May 23 '17 at 10:32

2

Working fiddle.

Firstly you have to use another name for your function instead of clear check this post Is “clear” a reserved word in Javascript?.

Secondly you should fix the quotes conflit in your HTML code exactly in all thebutton when you attach the onclick() event as you could notice HERE, e.g :

<td><button onclick="number("7");">7</button></td>
_____________________^______^_^__^

Try to use single quotes instead :

<td><button onclick="number('7');">7</button></td>
____________________^____________^

Hope this helps.

edited May 23 '17 at 10:32

Community

1
1

answered Oct 15 '16 at 09:00

Zakaria Acharki

66,747
15
75
101

2

Good find on the number function call! I missed that, not sure why someone has downvoted since this is pointing out a problem the OP will encounter further down the line. I would stick with double quotes for the onclick and use single quotes for the function argument though. Habit of using dynamic data and by default the browser uses double quotes for attributes but I'm sure both work all the same. +1 for preventing a future problem. – NewToJS Oct 15 '16 at 09:07
No worries.. there's always some peoples who don't know how to use the privileges... thanks for your intervention (updated my answer). – Zakaria Acharki Oct 15 '16 at 09:10
Very welcome :) We all come here to help or to seek help. – NewToJS Oct 15 '16 at 09:34
Thank you to you all for helping me out! I was pulling out my hairs wondering why a simple button wasn't working. – Artemis Oct 15 '16 at 18:45

score 0 · Answer 2 · answered Oct 15 '16 at 09:07

Replace onclick="number("1");" with onclick="number('1');" where 1 is entered single quotes. Also in declaration of number('s') function, you put variable in single quotes, this means, whenever number function is called, always value s is considered, so remove single quotes here.

Why is my javascript button click not working?

2 Answers2