Значение, введенное вами в поле ввода id="thousands", будет умножено на 1000, а результат будет отображен в поле ввода id="thousands-output". Эта часть кода работает отлично. То, что я хочу, это получить сумму значений всех умноженных выходных данных и отобразить ее в поле ввода id="totalBills". Я не могу решить эту проблему. Любая помощь будет оценена

HTML-код:

     <label>1000</label>
         <div class="input-group">
            <input type="number" class="form-control" name="thousands" id="thousands" />
            <span class="input-group-addon">=</span>
            <input type="text" class="form-control txt" id="thousands-output" style="width:70%;" readonly />
         </div>

     <label>500</label>
         <div class="input-group">
            <input type="number" class="form-control" name="five_hundreds" id="five_hundreds"/>
            <span class="input-group-addon">=</span>
            <input type="text" class="form-control txt" id="five_hundreds-output" style="width:70%;" readonly />
         </div>  

<input type="total" id="totalBills" class="form-control" value="0">

Код Javascript:

   var $output = $("#thousands-output");
    $("#thousands").keyup(function() {
        var value = parseFloat($(this).val());    
        $output.val(value*1000);
    });


      var $output2 = $("#five_hundreds-output");
    $("#five_hundreds").keyup(function() {
        var value = parseFloat($(this).val());       
        $output2.val(value*500);
    });
0
Ronald Torres 23 Фев 2018 в 12:40

3 ответа

Лучший ответ

Вам нужно получить оба значения, добавить их и установить в качестве значения поля ввода.

function getSum(){
  var sum = +$("#thousands-output").val() + +$("#five_hundreds-output").val();
  $("#totalBills").val(sum);
}

Вызовите эту функцию внутри обоих keyup событий

var $output = $("#thousands-output");
$("#thousands").keyup(function() {
  var value = parseFloat($(this).val());
  $output.val(value * 1000);
  getSum();
});


var $output2 = $("#five_hundreds-output");
$("#five_hundreds").keyup(function() {
  var value = parseFloat($(this).val());
  $output2.val(value * 500);
  getSum();
});

function getSum(){
  var sum = +$("#thousands-output").val() +  +$("#five_hundreds-output").val();
  $("#totalBills").val(sum);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>1000</label>
<div class="input-group">
  <input type="number" class="form-control" name="thousands" id="thousands" />
  <span class="input-group-addon">=</span>
  <input type="text" class="form-control txt" id="thousands-output" style="width:70%;" readonly />
</div>

<label>500</label>
<div class="input-group">
  <input type="number" class="form-control" name="five_hundreds" id="five_hundreds" />
  <span class="input-group-addon">=</span>
  <input type="text" class="form-control txt" id="five_hundreds-output" style="width:70%;" readonly />
</div>

<input type="total" id="totalBills" class="form-control" value="0">

< Сильный > Update :

Использование unary оператора + для преобразования строки в числа.

1
void 23 Фев 2018 в 10:05

Используйте querySelectorAll и reduce

//all the outputs are the child of input-group and has type="text"
var allOutputs = document.querySelectorAll( ".input-group input[type='text'].txt" );

//iterate all the output values. If the value is a number, add to the accumulator, else add 0
var sum = [ ...allOutputs ].reduce( ( a, c ) => a + ( isNaN( c.value ) ? 0 : +c.value ) , 0);

//now display this value
document.getElementById( "totalBills" ).value = sum;
1
gurvinder372 23 Фев 2018 в 09:55
$(document).ready(function(){
    var $output = $("#thousands-output");
    $("#thousands").keyup(function() {
        var value = getValue($(this));
        $output.val(value*1000);
        refreshTotal();
    });
    var $output2 = $("#five_hundreds-output");
    $("#five_hundreds").keyup(function() {
        var value = getValue($(this)); 
        $output2.val(value*500);
        refreshTotal();
    });    
});

function getValue(elem){
  var value = parseFloat($(elem).val());
  if (isNaN(value)){
    value = 0;
  }
  return value;
}

function refreshTotal(){
  var fi = getValue($("#five_hundreds-output"));
  var th = getValue($("#thousands-output"));
  $("#totalBills").val(fi+th);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>1000</label>
         <div class="input-group">
            <input type="number" class="form-control" name="thousands" id="thousands" />
            <span class="input-group-addon">=</span>
            <input type="text" class="form-control txt" id="thousands-output" style="width:70%;" readonly />
         </div>

     <label>500</label>
         <div class="input-group">
            <input type="number" class="form-control" name="five_hundreds" id="five_hundreds"/>
            <span class="input-group-addon">=</span>
            <input type="text" class="form-control txt" id="five_hundreds-output" style="width:70%;" readonly />
         </div>  

<input type="total" id="totalBills" class="form-control" value="0">
0
Aneesh R S 23 Фев 2018 в 10:16