jQuery 点击事件似乎不起作用

Question

I'm practicing doing a simple calculator using jQuery, I feel like the code is pretty simple in its own but no matter what I do absolutely nothing happens, as if there was no js file linked to beging with. Here's 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('/'));

and 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">&#247;</button></td>
</tr>

Could someone explain to me what I am doing wrong? is there a much simpler way to do it? thank you in advance

Answer 1

I modify your code and refactor. It should work.

In the original code contains some wrong syntax:

1. input filed should set value, so you should use val() , not use append() , and the usage of append() is wrong in the code...

2. click event pass parameter, please see jQuery click-eventData-handler and pass an execuded function is not expected.

 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">&#247;</button></td> </tr> </table>

Answer 2

You are calling a function within the.click() event function, but it instead expects a function reference or an anonymous function as a parameter.

$jQuery.on()
$jquery.click()

1. Add a common className (eg 'numberKey') to your calculator buttons representing numbers.

   <button type="button" class="numberKey" value="1">1</button>

2. Select all of these buttons at once and use a single click event handler for all of them.

    $(function() { $('button.numberKey').click(updateDisplay); }); function updateDisplay(clickEventObject) { // The button that was clicked can be referenced using // the 'this' keyword. // Variable-ize the button element into a jQuery object. let $button = $(this); // Get the 'value' attribute of the button let number = $button.attr('value'); // Get the displayed value. var expression = $("#display").val(); // Append the number to the display's value $("#display").val(`{$expression}{$number}`); }

---

FYI, the jQuery .append is not a property that can be appended to, or set to a value. It's a function which can be passed a string value. And that value will be appended to the contents of the selected element(s).

---

If you want to clear an input element, you should set its value to a blank string:

 $('#display').val('');

---

The 'ans' (answer?) function can work like this:

 function solve_ans() { let expression = $('#display').val(); let solution = eval(expression); $('#display').val(solution); }

---

Also, note that if you are using the same selector more than once in any context, it's usually worthwhile to cache/store the result of the selection in a variable and then reuse it, rather than re-selecting the same element(s).

 function solve_ans() { // Referring to this $display variable avoids repeatedly re-selecting the same elements from the DOM whenever you may need to refer to them. let $display = $('#display'); let expression = $display.val(); let solution = eval(expression); $display.val(solution); $display.addClass('solution').removeClass('expression'); }

Good luck!