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!
2 answers
solution1
2 ACCPTED 2016-10-15 09:00:55
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 , eg :
<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.
solution2
0 2016-10-15 09:07:35
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.