Question

0

53

Vistas

Making math operation in jquery

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

7 months ago · Juan Pablo Isaza

1 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

Answer 1 · 2022-07-03T03:33:53.002Z

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>