Блог

Главная - Вопросы по программированию - Не получил итоговое значение из вторых полей ввода?

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

#javascript #function

#javascript #функция

Вопрос:

Я новичок в 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. Есть ли какая-либо причина для того, чтобы sum была продуктом ?… Кроме того, у вас есть два входных файла с одинаковым идентификатором, которые являются входными данными для количества продуктов. измените их на уникальные идентификаторы.

2. извините, я не понял?

3. Идентификаторы отличаются для обоих входных данных, таких как ‘price’ ‘qty’ и ‘price2’ и ‘qty2’

4. Вы уверены? <input type="text" id="qty" name="productQty" type="text" id="total" name="producttotal" onChange="Calculate()"> 🙂

5. Спасибо Brioshje .. за помощь .. работает

Ответ №1:

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

  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 значение которой является произведением двух значений. Это никоим образом не относится к коду, но его название вводит в заблуждение и должно быть исправлено, поскольку другие люди, читающие ваш код, могут подумать, что это сумма, но это не сумма.

Комментарии:

1. спасибо за помощь, брат … работает, к сожалению, я не голосовал, потому что у меня репутация менее 15, но я буду подталкивать вас, когда я достигну 15

2. пожалуйста. не стесняйтесь принять ответ выше, чтобы закрыть сообщение.