Trabajando en una evaluación escolar probando el diseño HTML básico. Quiero agregar una función que cuando envíe una cantidad actualice el subtotal del carrito, y si ese subtotal es mayor a 40, dará una alerta que significa un código de descuento. Soy nuevo en JavaScript y la codificación en general, así que estoy luchando mucho. Siento que estoy muy cerca pero obtengo 'NaN', lo que supongo que se debe a que id = cantidad no se está alimentando a la función.
A los efectos de la tarea, me gustaría no usar jquery, y php no es necesario.
HTML relevante:
<div id="quantity"> <h4>How many people are coming?</h4> <label for="quantity">Quantity:</label> <input type="number" id="quantity" name="quantity" pattern="[0-9]+" onchange="cartUpdate()" > </div> <div id="cart"> <p>Total Cost: <span id="subTotal"></span></p> <button id="submit" type="submit" value="Order">Submit Order</button> </div>JavaScript:
var quantity = document.getElementById("quantity").value; function cartUpdate() { var subTotal = (15 * quantity).toFixed(2) - 0 ; document.getElementById("subTotal").innerHTML = "$" + subTotal; } document.getElementById("submit").addEventListener("click", function() { if (subTotal > 40) { alert("Your ticket has been sent to your email. Since you have spent over $40, you are also eligible for a 20% off coupon for the snack bar which is included in your ticket.") }});Le está dando NaN en lugar del total porque ha almacenado el valor de la quantity en una carga de página que no está undefined al inicio del programa. Para solucionar esto, obtenga el valor más reciente cada vez que cambie el valor. Vea el código a continuación, funciona como esperaba.
var quantity = document.getElementById("quantity").value; var subTotal = 0; function cartUpdate(e) { subTotal = (15 * e.target.value).toFixed(2) - 0; document.getElementById("subTotal").innerHTML = "$" + subTotal; } document.getElementById("submit").addEventListener("click", function() { if (subTotal > 40) { alert( "Your ticket has been sent to your email. Since you have spent over $40, you are also eligible for a 20% off coupon for the snack bar which is included in your ticket." ); } }); <div id="quantity"> <h4>How many people are coming?</h4> <label for="quantity">Quantity:</label> <input type="number" id="quantity" name="quantity" pattern="[0-9]+" onchange="cartUpdate(event)" /> </div> <div id="cart"> <p>Total Cost: <span id="subTotal"></span></p> <button id="submit" type="submit" value="Order">Submit Order</button> </div>