Home / Questions / 189309
Accepted
Hector Hernandez
Asked: 2020-08-17 08:13:20 +0800 CST 2020-08-17 08:13:20 +0800 CST

Problems with nextElementSibling when calculating a total - Jquery

  • 772

I am trying to perform a multiplication between quantity and price, to get their total, however I get the following error when doing it: I do TypeError: $(...).nextElementSibling is not a functionn't know how I could modify it in such a way that it is acceptable, I share my code:

shape

<form>
    <input type="text" id="quantity">
    <input type="text" id="price">
    <input type="text" class="result">
</form>

script

<script>
    $('#quantity, #price').keyup(function(){
        var cant = parseFloat(this.nextElementSibling('#quantity').val()) || 0;
        var price = parseFloat(this.nextElementSibling('#price').val()) || 0;
        var result = cant * price
        this.nextElementSibling('.result').val(result);
    })
</script>
javascript

1 Answers

  1. Best Answer

    You could search for the elements using $('selector')jquery, like so:

    $('#quantity, #price').keyup(function() {
  var cant = parseFloat($('#quantity').val()) || 0;
  var price = parseFloat($('#price').val()) || 0;
  var result = cant * price
  $('.result').val(result);
})
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="text" id="quantity"><br>
  <input type="text" id="price"><br>
  <input type="text" class="result">
</form>

    nextElementSiblingIt would work if you do something like document.getElementById("quantity").nextElementSiblingbut it would select the sibling of quantity, which is priceand I don't think it's very practical to use it like that, even in the case of the code I pasted the sibling would be <br>.

    If you want to multiply dynamically added items, you can use classes instead of ids:

    $('.multi').keyup(function() {

  var precio = [];
  var cantidad = [];

  $('.precio').each(function(i, obj) {
    precio.push(+obj.value);
  });

  $('.cantidad').each(function(i, obj) {
    cantidad.push(+obj.value);
  });

  var resultado = 0;

  precio.map((o, i) => {
    resultado += o * cantidad[i];
  });

  $("#result").val(resultado);

})
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="text" class="multi precio"> precio<br>
  <input type="text" class="multi cantidad"> cantidad<br><br>
  <input type="text" class="multi precio"> precio<br>
  <input type="text" class="multi cantidad">cantidad<br><br>
  <input type="text" class="multi precio"> precio<br>
  <input type="text" class="multi cantidad">cantidad<br><br>
  <input type="text" class="multi precio"> precio<br>
  <input type="text" class="multi cantidad">cantidad<br><br><br>
  <input type="text" id="result">resultado
</form>

    • 1