jQuery click event doesn't seem to be working

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

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 (e.g. '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!

Answer 2

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>