Problems with Nan Jquery

Asked

Viewed 740 times

0

good evening, I am trying to generate the result by multiplying the values of these textbox*span values, however it accuses that the value is not a number, I would like to understand which implementation I am doing wrong.

Fiddle: https://jsfiddle.net/6mkzzvqz/57/

HTML

  1. <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);
        });
             });
            });
javascript jquery html

2 answers

0


You need the sum of the two textbox multiplied by the sum of the two spans is that? If yes follows 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 wrong for the excerpt:

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <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="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>

0

The problem is occurring at find do obj in: "$(this). find(".item span"). html();" it does not find, comes "Undefined". what I did was add a Parent(), I made some other modifications but do 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>

Browser other questions tagged javascript jquery html

You are not signed in. Login or sign up in order to post.