Making math operation in jquery

Question

im completely new to jquery and i don't understand how to complete my code

i have 2 input type number with id=TA1 and id=TA2. i have a select option to choose between "+", "-", "/" and "*" and this is id=op. Now, in my jquery function, what should i write to make it work? i know in js theres eval() but i don't know how to do that in jquery...

var Calcolatrice = function (args) {
    this.args = args;
};
Calcolatrice.prototype.calc = function (x, y, z) {
    var x = $("#TA1").val(value);
    var y = $("#TA2").val(value);
    var z = $("#op").val(value);
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}
.black {
    background-color: black;
}

<body class="black">
    <div class="flex flex-row justify-evenly py-32">
      <div class="flex flex-col">
        <input type="number" id="TA1">
      </div>
      <div class="flex flex-col">
        <select id="op">
          <option label="+">+</option> 
          <option label="-">-</option> 
          <option label="/">/</option> 
          <option label="*">*</option>
        </select>
      </div>
      <div class="flex flex-col">
        <input type="number" id="TA2">
      </div>
    </div>
    <div class="flex flex-row justify-center">
      <div class="flex fllex-col">
        <textarea name="risultato" id="risultato" cols="30" rows="1">
        </textarea>
      </div>
    </div>
  </body>

this snippet do not rapresent the end result since i used tailwind and flexbox but i do not put them into the snippet code

i know. i forgot to delete it. i was trying to think on what to write afterward. that will be the code part where i insert the result of the math operation — Filippo Canino, Mar 29 '22 at 15:32
well, if it was js i would have used eval(). i startyed learning at work and for work jquery today and i know nothing if not the fact that instead of writind document.getelementbyid you use $("#id").... — Filippo Canino, Mar 29 '22 at 15:34
jQuery is a library! The code you have shown us _is_ JavaScript that uses jQuery, but you probably shouldn't be using `eval()` anyway. — phuzi, Mar 29 '22 at 15:37
oh....i'm sorry. i didn't know. still, are you able to help me? i don't know how to solve this — Filippo Canino, Mar 29 '22 at 15:38
Does this answer your question? [Are Variable Operators Possible?](https://stackoverflow.com/questions/5834318/are-variable-operators-possible) — Justinas, Mar 29 '22 at 15:40

mmh4all · Answer 1 · 2022-03-29T15:45:07.170

You can do it like this

    $("input").on('input',() => {
    var x = $("#TA1").val();
    var y = $("#TA2").val();
    var z = $("#op").val();
    if(x && y && z){
        $("#risultato").val(eval(`${x}${z}${y}`));
    }
  });

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}
.black {
    background-color: black;
}

    <div class="flex flex-row justify-evenly py-32">
        <div class="flex flex-col">
          <input type="number" id="TA1">
        </div>
        <div class="flex flex-col">
          <select id="op">
            <option label="+">+</option> 
            <option label="-">-</option> 
            <option label="/">/</option> 
            <option label="*">*</option>
          </select>
        </div>
        <div class="flex flex-col">
          <input type="number" id="TA2">
        </div>
      </div>
      
      <div class="flex flex-row justify-center">
        <div class="flex fllex-col">
          <textarea name="risultato" id="risultato" cols="30" rows="1">
          </textarea>
        </div>
      </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

sadly i can't upvote, i don't have 15 reputation. just a quick question, wehere do i have to place the script? do i have to delete the little script i already wrote? do i have to paste it inside the prototype? — Filippo Canino, Mar 29 '22 at 15:51

Making math operation in jquery

1 Answers1