Не получили итоговое значение из вторых полей ввода? - PullRequest
Новая
       1

Не получили итоговое значение из вторых полей ввода?

0 голосов
/ 23 апреля 2019

Я новичок в javascript, пишу код самостоятельно, используя технику DOM.Мой Первый блок кода работает правильно, и он дает мне сумму для первых двух полей ввода, но я не получил сумму, когда я ввел значения 2-го блока кода.вот мой код 

<body>
        <script language ="javascript">
                function Calculate(){

                    var pricee = document.getElementById('price').value;
                    var qtyy = document.getElementById('qty').value;
                    var sum = pricee * qtyy;
                    document.getElementById('total').value = sum;

                    var newprice = document.getElementById('price2').value;
                    var newqty = document.getElementById('qty2').value;
                    var sum2 = newprice * newqty;
                    document.getElementById('total2').value = sum2;
                }
            </script>


    <form>
       Product Name: <input type="text" id="name" name="productName">
       <br>
       Product Price: <input type="text" id="price" name="productPrice">
       <br>
       Product Qty: <input type="text" id="qty" name="productQty" type="text" id="total" name="producttotal"
       onChange="Calculate()">
       <br>
       Total: <input type="text" id="total" name="producttotal">

       <hr>

       Product Name: <input type="text" id="name2" name="productName">
       <br>
       Product Price: <input type="text" id="price2" name="productPrice">
       <br>
       Product Qty: <input type="text" id="qty2" name="productQty" type="text" id="total" name="producttotal"
       onChange="Calculate()">
       <br>
       Total: <input type="text" id="total2" name="producttotal">



    </form>

1 Ответ

0 голосов
/ 23 апреля 2019

У вашего кода есть две основные проблемы:

  1. Типы ввода: текст , поэтому их значение рассматривается как текст .Лучше вместо этого преобразовать эти значения в числа , прежде чем выполнять математические операции над ними.
  2. Ваши входные данные "Кол-во" имеют несколько id и name и type.Вероятно, это ошибка копирования-вставки.

Чтобы исправить точку 1, вы можете добавить приведение к числу, используя унарный оператор (+), например: 

function Calculate(){
  var pricee = +document.getElementById('price').value;
  var qtyy = +document.getElementById('qty').value;
  var sum = pricee * qtyy;
  document.getElementById('total').value = sum;

  var newprice = +document.getElementById('price2').value;
  var newqty = +document.getElementById('qty2').value;
  var sum2 = newprice * newqty;
  document.getElementById('total2').value = sum2;
}

Исправитьпункт 2, вам просто нужно удалить дополнительные теги из ваших входных данных:

Первый: 

Product Qty: <input type="text" id="qty" name="productQty" type="text" id="total" name="producttotal"
       onChange="Calculate()">

должен стать таким: 

Product Qty: <input type="text" id="qty" name="productQty" onChange="Calculate()">

И второй должен следоватьто же правило.Кроме того, вы должны добавить событие onChange к каждому входу, касающемуся вычисления.

Полный рабочий код:

HTML: 

Product Name: <input type="text" id="name" name="productName">
       <br>
       Product Price: <input type="text" id="price" onChange="Calculate()" name="productPrice">
       <br>
       Product Qty: <input type="text" id="qty" name="productQty" onChange="Calculate()">
       <br>
       Total: <input type="text" id="total" name="producttotal">

       <hr>

       Product Name: <input type="text" id="name2" name="productName">
       <br>
       Product Price: <input type="text" id="price2" onChange="Calculate()" name="productPrice">
       <br>
       Product Qty: <input type="text" id="qty2" onChange="Calculate()" name="productQty"
       onChange="Calculate()">
       <br>
       Total: <input type="text" id="total2" name="producttotal">

Javascript: 

function Calculate(){
  var pricee = +document.getElementById('price').value;
  var qtyy = +document.getElementById('qty').value;
  var sum = pricee * qtyy;
  document.getElementById('total').value = sum;

  var newprice = +document.getElementById('price2').value;
  var newqty = +document.getElementById('qty2').value;
  var sum2 = newprice * newqty;
  document.getElementById('total2').value = sum2;
}

Рабочая скрипка для игры с: https://jsfiddle.net/cjxs7pLo/1/

В качестве побочной (неактуальной) ноты вы определяете переменную с именем sum, значение которой равно product ofдва значения.Это не имеет никакого отношения к коду, но его название вводит в заблуждение и должно быть исправлено, так как другие люди, читающие ваш код, могут думать, что это сумма, но это не сумма.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...