Как я могу использовать текстовое значение в качестве математического оператора? - PullRequest
Новая
       30

Как я могу использовать текстовое значение в качестве математического оператора?

0 голосов

Я пытаюсь создать простой калькулятор, в котором пользователь вводит 2 положительных числа и символ вычисления (+, -, *, /) и при включении вызывается скрипт jQuery для вычисления результата и его распечатки.

Мне трудно заставить скрипт читать мой символ и выполнять операторы if.Я попытался включить все числа в функцию keyup или только последний (символ).Ничего не работает! 

    <!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
      $("#symbol1").keyup(function(){
        var symbol = $("[name='symbol1']").val();
        var fnum = $("[name='fnum']").val();
        var snum = $("[name='snum']").val();
        if(symbol == "+"){
        var result = fnum + snum;
        $("#result").html(result)
        }
        else if(symbol == "-"){
        var result = Math.abs(fnum - snum);
        $("#result").html(result)
        }
        else if(symbol == "*"){
        var result = fnum*snum;
        $("#result").html(result)
        }
        else if(symbol == "/"){
        var result = fnum/snum;
        $("#result").html(result)
        }
        else{alert("Please input a correct math symbol");}
      });
    });
    </script>
    </head>
    <body>
            <center>
            <form id="calc">
                        First Number: <input class="calculations" type="text" name="fnum" size="10" required><br>
              <br>
              Second Number:<input class="calculations" type="text" name="snum" size="10" required><br>
              <br>
              Symbol:<input class="calculations" type="text" name="symbol1" size="10" required><br>
            <p>Result is: <input type="text" id=result></p>
              </form>
            </center>
        </body>
    </html>

Я бы ожидал после нажатия математического символа, что результат будет отображаться, но это не так.Заранее спасибо за каждую рекомендацию.Я уже создал простой калькулятор ИМТ, который отлично работает с функцией отправки.Но на этот раз мне не повезло.PS Извините, если мой код не читается, я только начинаю изучать jQuery!

Ответы [ 3 ]

3 голосов
/ 19 июня 2019

Всего пара проблем в вашем коде

Сначала вы слушали: 

$("#symbol1").keyup()

Но вы не дали своему входу "symbol1" идентификатор, который будет распознан (только атрибут имени)

Во-вторых, вы устанавливали html результата, а не val, даже если result является входным значением

Наконец, вам нужно преобразовать значения для fnum и snum в Number, потому что онистроки (так что 4 + 5 вернет 45)

Вот фрагмент кода, с которым он работает 

$(document).ready(function(){
      $("#symbol1").keyup(function(){
        var symbol = $("[name='symbol1']").val();
        var fnum = Number($("[name='fnum']").val());
        var snum = Number($("[name='snum']").val());
        if(symbol == "+"){
        var result = fnum + snum;
        $("#result").val(result)
        }
        else if(symbol == "-"){
        var result = Math.abs(fnum - snum);
        $("#result").val(result)
        }
        else if(symbol == "*"){
        var result = fnum*snum;
        $("#result").val(result)
        }
        else if(symbol == "/"){
        var result = fnum/snum;
        $("#result").val(result)
        }
        else{alert("Please input a correct math symbol");}
      });
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
    <html>
    <head>
    </head>
    <body>
            <center>
            <form id="calc">
                        First Number: <input class="calculations" type="text" name="fnum" size="10" required><br>
              <br>
              Second Number:<input class="calculations" type="text" name="snum" size="10" required><br>
              <br>
              Symbol:<input class="calculations" type="text" name="symbol1" size="10" required id="symbol1"><br>
            <p>Result is: <input type="text" id=result></p>
              </form>
            </center>
        </body>
    </html>
1 голос
/ 19 июня 2019

Ваш селектор ожидает идентификатор, а не имя. 

<input class="calculations" type="text" id="symbol1" size="10" required>
// --------------------------------------^

Fiddle

Νίκος Τιτομιχελάκης указал, что вам нужно преобразовать ваши строки в числа. Кроме того, определите result вне оператора if, чтобы вам не приходилось его инициализировать повторно, и установите текстовое значение на странице один раз, также вне оператора if.

Также оповещения - это боль, как для вас, как для разработчика, так и для пользователей. jQuery позволяет легко размещать сообщения на странице, как я делал в своей демонстрации.

0 голосов
/ 19 июня 2019

Там мало чего не хватает, и ваш код читабелен :) Ссылка plnkr с обновленным кодом 

var symbol = $("[name='symbol1']").val();
var fnum = $("[name='fnum']").val();
var snum = $("[name='snum']").val();               
if(symbol == "+"){
  var result = fnum + snum;
  $("#result").val(result)
 }

 <p>Result is: <input type="text" id="result"></p>

// цитаты выше ------------------------------------ ^ ----- ^

полный код https://plnkr.co/edit/SLyOZEE6WQRnygfHPJix?p=preview

...