Versão atual:

Atualização de campos em tempo real

Olá. Tenho um programa "bobo" extraido do livro "Use a Cabeça - JavaScript". Eu fiz uma pagina com um formulário em que o usuario preenche os dados com seu nome e a quantidade de Donuts. Em seguida a página calcula o valor do pedido com base no preço unitário de cada donut e uma taxa adicional. Até ai tudo bem, eu consegui fazer. O problema é que a página so preenche os campos com subtotal/taxa/total quando eu atualizo a pagina (F5), e não o faz imediatamente. Segue o código HTML e o código Javascript que faz os cálculos e deveria mostrar os valores atualizados na página.

<!DOCTYPE html>

<html>
    <head>

        <title> Duncan's Just-in-Time Donuts</title>
        <meta charset = "utf-8">
        <link rel="stylesheet" href="../css/principal.css">

    </head>


    <body>

        <h1> Duncan's Just-in-Time Donuts</h1>
        <p><em>All donuts 50 cents each, cake or glazed</em></p>
        <div class="formulario">
            <form name="orderform" action = "donuts.php" method = "POST">

                <ul>
                    <li>Name:                     <input type="text" id="name"             name = "name"        value =""     ></li>
                    <li># of cake donuts:        <input type="text" id="cakedonuts"         name="cakedonuts"    value =""     ></li>
                    <li># of glazed donuts:     <input type="text" id="glazeddonuts"     name="glazeddonuts"    value =""     ></li>
                    <li>Minutes 'till pickup:     <input type="text" id="minutes"         name="minutes"                     ></li>
                    <li>Subtotal:                 <input type="text" id="subtotal"         name="subtotal" value =""         ></li>
                    <li>Tax:                    <input type="text" id="tax"             name="tax"        value =""         ></li>
                    <li>Total:                    <input type="text" id="total"             name="total"     value =""         ></li>
                    <li><input type="button" value="place order" onclick="placeOrder(this.form);"></li>
                </ul>
            </form>
        </div>
        <script src="../js/scripts.js"></script>
    </body>
</html>
function updateOrder(){
    const TAXRATE = 0.1;
    const DONUTPRICE = 1;
    var numCakeDonuts = document.getElementById("cakedonuts").value*1;
    var numGlazedDonuts = document.getElementById("glazeddonuts").value*1;
    var subtotal = (parseFloat(numCakeDonuts)+parseFloat(numGlazedDonuts))*DONUTPRICE;
    var tax = subtotal*TAXRATE;
    var total = subtotal+tax;
    document.getElementById("subtotal").value = "$"+subtotal.toFixed(2);
    document.getElementById("tax").value = "$"+tax.toFixed(2);
    document.getElementById("total").value = "$"+total.toFixed(2);
}
// Era para atualizar sempre que o campo de cada input abaixo referenciado fosse mudado
// mas isso só acontece quando eu atualizo a página.
document.getElementById("subtotal").onchange = updateOrder();
document.getElementById("tax").onchange = updateOrder();
document.getElementById("total").onchange = updateOrder();
document.getElementById("name").onchange = updateOrder();
document.getElementById("minutes").onchange = updateOrder();
document.getElementById("cakedonuts").onchange = updateOrder();
document.getElementById("glazeddonuts").onchange = updateOrder();

// Verifica se o numero digitado é um número
function isNumber(element){
    if(document.getElementById(element).value == "" || isNaN(document.getElementById(element).value))
        return false;
    return true;

}
function placeOrder(form){

    if(document.getElementById("name").value =="")
        alert("Voce precisa fornecer um nome antes de enviar o pedido");

    else if(!isNumber("cakedonuts") || !isNumber("glazeddonuts") || !isNumber("minutes"))
        alert("Voce precisa preencher todos os campos corretamente.");
    else
        form.submit();
}

Se eu colocar no input o onchange = "updateOrder()" funciona, mas eu não queria fazer isso no html pq acho fica meio "deselegante".

Me desculpem se falei alguma bobagem mas eu sou iniciante ainda. Desde já agradeço.

Versões(4):

Ver a versão formatada

Atualização de campos em tempo real

Comentário

new question