Problems with NaN Jquery

0

Good night, I'm trying to generate the result by multiplying the values of these textbox * span values, however he accuses the value is not a number, I would like to understand which implementation I'm doing wrong.

Fiddle: link

HTML

  • <form action="#">
    <div class="media-body">
      <div class="menu-tittle">
    </div>
      <div class="quantity">
    
          <div class="pizza-add-sub">
            <input type="text" class="qtdpedidos" value="0"/>
          </div>
    
      </div>
      <div class="item" class="pizza-price"> <span id="pizza" class="pizza">10.00</span>
      </div>
    </div>
    <div class="quantity">
    
          <div class="pizza-add-sub">
            <input type="text" id="qtdpedidos" class="qtdpedidos" value="0"/>
          </div>
    
      </div>
      <div class="item" class="pizza-price"> <span id="pizza" class="pizza">10.00</span>
      </div</div>
    
    </form>
    <p>Valor do Pedido: R$<span id="resultado" class="resultado">0.00</span></p>
    
  • Jquery

     $(document).ready(function() {
    
                    $(".pizza-add-sub").append('<div class="plus qty-pizza">+</div><div class="mines qty-pizza">-</div>');
                    $(".qty-pizza").on("click", function() {
    
                    var $button = $(this);
                    var oldValue = $button.parent().find("input").val();
                    if ($button.text() == "+") {
                      var newVal = parseFloat(oldValue) + 1;
                    } else {
                      // Don't allow decrementing below zero
                         if (oldValue > 0) {
                            var newVal = parseFloat(oldValue) - 1;
                            } else {
                            newVal = 0;
                          }
                    }
                    $button.parent().find("input").val(newVal);
    
                var valorTotal = 0;
            $.each($(".quantity"), function(){
                  valorTotal = Number($(this).find(".qtdpedidos").val()) * Number($(this).find(".item span").html());
                  document.getElementById("resultado").innerHTML = parseFloat(valorTotal);
            });
                 });
                });
    
        
    asked by anonymous 05.05.2017 / 04:22

    2 answers

    0

    You need the sum of the two textbox multiplied by the sum of the two spans is that? if you follow the script below:

     $(document).ready(function () {
    
                $(".pizza-add-sub").append('<div class="plus qty-pizza">+</div><div class="mines qty-pizza">-</div>');
                $(".qty-pizza").on("click", function () {
    
                    var $button = $(this);
                    var oldValue = $button.parent().find("input").val();
                    if ($button.text() == "+") {
                        var newVal = parseFloat(oldValue) + 1;
                    } else {
                        // Don't allow decrementing below zero
                        if (oldValue > 0) {
                            var newVal = parseFloat(oldValue) - 1;
                        } else {
                            newVal = 0;
                        }
                    }
                    $button.parent().find("input").val(newVal);
                    /*var v1 = Number($('#item1 span').html());
                    var v2 = Number(document.getElementById("qtdpedidos").value);*/
                    var valorTotal = 0;
                    var valoresMultiplicar = 0;
                    $(".qtdpedidos").each(function () {
                        valorTotal += parseFloat($(this).val());
                    })
    
                    $(".item span").each(function () {
                        valoresMultiplicar += parseFloat($(this).html());
                    })
                    $("#resultado").text((valorTotal * valoresMultiplicar).toString());
                });
            });
    

    Detail:

    Your script was flawed by the snippet:

    Number($(this).find(".item span").html())
    

    If you have to add and multiply the spans separately and textbox follows script and html:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><formaction="#">
            <div class="media-body">
                <div class="menu-tittle">
                </div>
                <div class="quantity">
    
                    <div class="pizza-add-sub">
                        <input type="text" class="qtdpedidos" value="0" />
                    </div>
    
                </div>
                <div class="item" class="pizza-price">
                    <span id="pizza" class="pizza">10.00</span>
                </div>
            </div>
            <div class="media-body">
                <div class="quantity">
    
                    <div class="pizza-add-sub">
                        <input type="text" id="qtdpedidos" class="qtdpedidos" value="0" />
                    </div>
    
                </div>
                <div class="item" class="pizza-price">
                    <span id="Span1" class="pizza">10.00</span>
                </div>
            </div>
        </form>
        <p>Valor do Pedido: R$<span id="resultado" class="resultado">0.00</span></p>
    

    Script:

     <script>
        $(document).ready(function () {
    
            $(".pizza-add-sub").append('<div class="plus qty-pizza">+</div><div class="mines qty-pizza">-</div>');
            $(".qty-pizza").on("click", function () {
    
                var $button = $(this);
                var oldValue = $button.parent().find("input").val();
                if ($button.text() == "+") {
                    var newVal = parseFloat(oldValue) + 1;
                } else {
                    // Don't allow decrementing below zero
                    if (oldValue > 0) {
                        var newVal = parseFloat(oldValue) - 1;
                    } else {
                        newVal = 0;
                    }
                }
                $button.parent().find("input").val(newVal);
                /*var v1 = Number($('#item1 span').html());
                var v2 = Number(document.getElementById("qtdpedidos").value);*/
                $("#resultado").text((parseFloat($(this).closest(".media-body").find(".qtdpedidos").val()) * parseFloat($(this).closest(".media-body").find(".item span").html())).toString());
            });
        });
    </script>
    
        
    05.05.2017 / 04:42
    0

    The problem is occurring in the obj find in: "$ (this) .find (". it does not find, it comes "undefined". what I did was add a parent (), I made some other modifications but did not affect the result.

    $(document).ready(function () {
        $(".pizza-add-sub").append('<div class="plus qty-pizza">+</div><div class="mines qty-pizza">-</div>');
        $(".qty-pizza").on("click", function () {
            var newVal = 0;
            var $button = $(this);
            var oldValue = $button.parent().find("input").val();
            if ($button.text() == "+") {
                newVal = parseFloat(oldValue) + 1;
            } else {
                // Don't allow decrementing below zero
                if (oldValue > 0) {
                    var newVal = parseFloat(oldValue) - 1;
                }
            }
            $button.parent().find("input").val(newVal);
    		/*var v1 = Number($('#item1 span').html());
    		var v2 = Number(document.getElementById("qtdpedidos").value);*/
            var valorTotal = 0;
            $.each($(".quantity"), function () {
                var qtd_pedidos = $(this).find(".qtdpedidos").val();
                var total_pizza = $(this).parent().find(".item span").html();
    
                valorTotal = Number(qtd_pedidos) * Number(total_pizza);
                document.getElementById("resultado").innerHTML = parseFloat(valorTotal);
            });
        });
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        
    05.05.2017 / 05:05