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);
});
});
});