如何用他们的ID减去两个div？

Question

我有一些范围滑块和输入字段。从那里我得到了一些方程式，现在我想用它们的 ID 减去那些动态数字。下面是代码，但我得到的是 NaN 值。下面的步骤，我已经搞定了。

从范围滑块和.averagetime 的乘积得到#totalavgtime
从范围滑块和 .radio-roi 下一个输入值的乘积中获取#timetoproduce。
现在尝试减去#totalavgtime - #timetoproduce 但在#timesaving 中得到 NaN 值。

$(document).ready(function() {
  $(".range").on("change", function() {
    var mult = 0;
    $('.range').each(function(i) {
      var selector_next = parseInt($(".averagetime:eq(" + i + ")").attr("value"))
      mult += parseInt($(this).val()) * selector_next //multply..
      console.log($(".averagetime:eq(" + i + ")").attr("value"), $(this).val())
    })
    $("#totalavgtime").val(mult)
  })
});

$(document).ready(function() {
  $('.range').on('change', function() {
    let n  = $(this).attr('id').match(/\d+/g)[0];
    let total = 0;
    let checkVal = $('.radio-roi:checked').next('input').val();
    let multiplyFactor = parseFloat(checkVal);
    console.log(multiplyFactor)
    $('.range').each(function() {
      total += (parseFloat($(this).val()) * multiplyFactor);
    });
    $('#timetoproduce').value(total);
  })
});

$(document).ready(function() {
  var txt1 = parseInt(document.getElementById("totalavgtime").value);
  var txt2 = parseFloat(document.getElementById("timetoproduce").value);
  var res = document.getElementById("timesaving");
  Number(txt1);
  Number(txt2);
  
 //Substract that
  res.value = txt1 - txt2;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<input type="radio" id="" class="radio-roi" name="plan" value="plus" checked>
<input type="text" value="2.5" id="actualtime2" class="hiden-actual-time" disabled><br>

<input type="radio" id="" class="radio-roi" name="plan" value="pro">
<input type="text" value="3" id="actualtime3" class="hiden-actual-time" disabled><br>

<input type="text"value="6" id="avgtime-id" class="averagetime"disabled><br>
<input type="range" name="slider-1" min="0" max="12" value="0" step="1" class="range" id="range-slider"><br>


<input type="text"id="totalavgtime" value="" disabled><br>
<input type="text"id="timetoproduce" value="" disabled><br>
<input type="text"id="timesaving" value="" disabled><br>

Answer 1

您可以将两个事件处理程序合并为一个，因为它们都触发相同的元素。因此，在每次迭代中获取范围滑块的值并将总计添加到同一变量并将它们设置为所需的输入。现在，要减去它们，请检查值是否不为空，具体取决于输入的取值，否则取 0 以避免 NaN 错误。

演示代码 :

$(document).ready(function() {
  $(".range").on("change", function() {
    $(this).next().text($(this).val()) //for output(range)
    var selector_next_avg = 0;
    var timetoproduce = 0
    var checkVal = parseFloat($('.radio-roi:checked').next('input').val()); //radio next input
    $('.range').each(function(i) {
      var selector_next = parseInt($(".averagetime:eq(" + i + ")").val()) //avg..input
      selector_next_avg += parseInt($(this).val()) * selector_next;
      timetoproduce += (parseFloat($(this).val()) * checkVal);

    })
    //set both values
    $("#totalavgtime").val(selector_next_avg)
    $('#timetoproduce').val(timetoproduce);
    total() //call to total..(sub)
  })
});



function total() {
  var txt1 = $("#totalavgtime").val() != "" ? parseFloat($("#totalavgtime").val()) : 0; //if null take 0
  var txt2 = $("#timetoproduce").val() != "" ? parseFloat($("#timetoproduce").val()) : 0;
  $("#timesaving").val(txt1 - txt2); //set value

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<input type="radio" id="" class="radio-roi" name="plan" value="plus" checked>
<input type="text" value="2.5" id="actualtime2" class="hiden-actual-time" disabled><br>

<input type="radio" id="" class="radio-roi" name="plan" value="pro">
<input type="text" value="3" id="actualtime3" class="hiden-actual-time" disabled><br>

<input type="text" value="6" id="avgtime-id" class="averagetime" disabled><br>
<input type="range" name="slider-1" min="0" max="12" value="0" step="1" class="range" id="range-slider"><output></output><br>


<input type="text" id="totalavgtime" value="" disabled><br>
<input type="text" id="timetoproduce" value="" disabled><br>
<input type="text" id="timesaving" value="" disabled><br>

如何用他们的ID减去两个div？

How to subtract two div by their ID?

html

javascript

jquery

input

range