jQuery click event doesn't seem to work
Akahne Saikyo
I'm practicing making a simple calculator using jQuery, and I think the code itself is pretty simple, but no matter what I do, absolutely nothing happens, as if there's no js file linked to beging. Here is the jQuery code:
function ud(n){
$("#display").append += n;
}
function ans(c){
c = eval($("#display").html);
$("#display").append = c;
}
function clc(){
$("#display").append = '';
}
$("#button0").click(ud(0))
$("#button1").click(ud(1));
$("#button2").click(ud(2));
$("#button3").click(ud(3));
$("#button4").click(ud(4));
$("#button5").click(ud(5));
$("#button6").click(ud(6));
$("#button7").click(ud(7));
$("#button8").click(ud(8));
$("#button9").click(ud(9));
$("#addButton").click(ud('+'));
$("#subtractButton").click(ud('-'));
$("#multiplyButton").click(ud('*'));
$("#clearButton").click(clc());
$("#equalsButton").click(ans());
$("#divideButton").click(ud('/'));
Here is the HTML:
<tr>
<td colspan="4"><input id="display" name="display" disabled></input></td>
</tr>
<tr>
<td><button id="button1" value="1">1</button></td>
<td><button id="button2" value="2">2</button></td>
<td><button id="button3" value="3">3</button></td>
<td><button id="addButton">+</button></td>
</tr>
<tr>
<td><button id="button4" value="4">4</button></td>
<td><button id="button5" value="5">5</button></td>
<td><button id="button6" value="6">6</button></td>
<td><button id="subtractButton">-</button></td>
</tr>
<tr>
<td><button id="button7" value="7">7</button></td>
<td><button id="button8" value="8">8</button></td>
<td><button id="button9" value="9">9</button></td>
<td><button id="multiplyButton">*</button></td>
</tr>
<tr>
<td><button id="clearButton">C</button></td>
<td><button id="button0" value="0">0</button></td>
<td><button id="equalsButton">=</button></td>
<td><button id="divideButton">÷</button></td>
</tr>
Can someone explain to me what I'm doing wrong? Is there an easier way? Thank you in advance
Alvin
I modify your code and refactor. It should work.
Included some bad syntax in the original code:
Input fields are supposed to set values, so you should use
val(), notappend(), and the usage of append() is wrong in your code...click event pass parameter, see jQuery click-eventData-handler and don't want to pass executed function.
function ud(e) {
var currentVal = $("#display").val();
$("#display").val(currentVal + e.data.n);
}
function ans(c) {
var result = eval($("#display").val());
$("#display").val(result);
}
function clc() {
$("#display").val('');
}
for(var i = 0; i < 10; i++) {
$('#button' + i).click({n: i}, ud);
}
$("#addButton").click({n: '+'}, ud);
$("#subtractButton").click({n: '-'}, ud);
$("#multiplyButton").click({n: '*'}, ud);
$("#divideButton").click({n: '/'}, ud);
$("#clearButton").click(clc);
$("#equalsButton").click(ans);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<table>
<tr>
<td colspan="4"><input id="display" name="display" disabled></input></td>
</tr>
<tr>
<td><button id="button1" value="1">1</button></td>
<td><button id="button2" value="2">2</button></td>
<td><button id="button3" value="3">3</button></td>
<td><button id="addButton">+</button></td>
</tr>
<tr>
<td><button id="button4" value="4">4</button></td>
<td><button id="button5" value="5">5</button></td>
<td><button id="button6" value="6">6</button></td>
<td><button id="subtractButton">-</button></td>
</tr>
<tr>
<td><button id="button7" value="7">7</button></td>
<td><button id="button8" value="8">8</button></td>
<td><button id="button9" value="9">9</button></td>
<td><button id="multiplyButton">*</button></td>
</tr>
<tr>
<td><button id="clearButton">C</button></td>
<td><button id="button0" value="0">0</button></td>
<td><button id="equalsButton">=</button></td>
<td><button id="divideButton">÷</button></td>
</tr>
</table>