Calculation of quantity of products with error?

Asked

Viewed 72 times

-2

I did the part of the calculation of quantity of buying products, in JS, the final result gives error, the total is not multiplied, and continues the same price (129,00).

var $input_quantidade = document.querySelector("#qtd");
var $output_total = document.querySelector("#total");

$input_quantidade.oninput = function() {
    var preço = document.querySelector("#preço").textContent;
    preço = preço.replace ("R$ ","");
    preço = preço.replace (",", ".");
    preço = parseFloat(preço);

    var quantidade = $input_quantidade.value;
    var total = quantidade * preço;
    total = "R$" + total.toFixed(2);
    total = total.replace(".",",");

    $output_total.value = total;


}
<!DOCTYPE html>
<html>
     <head>
         <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
         <link rel="stylesheet" href="bootstrap/css/open-iconic-bootstrap.css">
         <script type="text/javascript" src="total.js"></script>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width">
           <title>Checkout Mirror Fashion</title>
     </head> 
     <body>
         <div class="jumbotron jumbotron-fluid">
             <div class="container">
                <h1 class="display-4">Ótima escolha!</h1>
        <p class="lead">Obrigado por comprar na Mirror Fashion!
           Preencha seus dados para efetivar a compra.</p>
        </div>
    </div>
    <div class="col-md-4">

    <div class="card mb-3">

   
        <div class="card-header"> 
                 <h2>Sua compra</h2>
        </div>
        <div class="container">
        <div class="card-body">
            <form class="col-md-8">
                <div class="row">
                <fieldset class="col-lg-6">
                    <legend>Dados pessoais</legend>
                    <div class="form-group">
                        <label for="nome">Nome completo</label>
                        <input type="text" class="form-control" id="nome" name="nome" autofocus required>
                        </div>

                    <div class="form-group">
                        <label for="email">Email</label>
                        <input type="email" class="form-control" id="email" name="email" placeholder="[email protected]">
                    </div>

                    <div class="form-group">
                        <label for="cpf">CPF</label>
                        <input type="text" class="form-control" id="cpf" name="cpf" placeholder="000.000.00" required>
                    </div>

                    <div class="form-group custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" id="newsletter"
                         value="sim checked">
                         <label class="custom-control-label" for="newsletter">Quero receber Newsletter da Mirror Fashion</label>
                    </div>
                </fieldset>
                

              <fieldset class="col-lg-6">
                  <legend>Cartão de crédito</legend>
                  <div class="form-group">
                      <label for="numero-cartao">Número-CW</label>
                      <input type="text" class="form-control" id="numero-cartao" name="numero-cartao">
                  </div>

                 <div class="form-group">
                     <label for="bandeira-cartao">Bandeira</label>
                     <select class="custom-select" id="bandeira-cartao">
                         <option disabled selected>Selecione uma opção</option>
                         <option value="master">Mastercad</option>
                         <option value="visa">VISA</option>
                         <option value="amex">American Express</option>
                     </select>
                 </div>

                 <div class="form-group">
                    <label for="validade-cartao">Validade</label>
                    <input type="month" class="form-control" id="validade-cartao" name="validade-cartao">
                 </div>
              </fieldset>
              </div>
            <button type="submit" class="btn-lg btn btn-primary">
                <span class="oi oi-thumb-up"></span>
                <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-circle-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="8" cy="8" r="8"/>
                  </svg>
                  Confirmar Pedido 
            </button>
            </form>
            <img src="img/produtos/foto1-verde.png" alt="Fuzzy Cardigan"
            class="img-thumbnail mb-3">
         <dl>
             <dt>Produto</dt>
             <dd>Fuzzy Cardigan</dd>

             <dt>Cor</dt>
             <dd>Verde</dd>

             <dt>Tamanho</dt>
             <dd>40</dd>

             <dt>Preço</dt>
             <dd id="preço">R$ 129,90</dd>
         </dl> 
         </div>
         </div>
         </div>

         <div class="card mb-3">
         <div class="card-body">
             

             <div class="form-group">
                 <label for="qtd">Quantidade:</label>
                 <input type="number" id="qtd" min="1" max="99" value="1" class="form-control">
             </div>

             <div class="form-group">
                 <label for="total">Total:</label>
                 <output for="qtd preço" id="total" class="form-control">R$ 129,00</output>
             </div>
         </div>    
         </div>
         </div>

     </body>
</html>

javascript html

  • How about replacing . nodeValue with . value ? will it work ? I bet

  • I did it, but it’s still the same.

  • No, you didn’t, you replaced it with Value with uppercase letter and not value with minuscule letter, the uppercase letter makes the difference

  • Thank you very much guy saw,now it worked,thank you very much even.

1 answer

0

The code is in error when recovering the price value.

Several points:

Do not put variable with (ç) cedilla, accent or anything in that direction. Check the good variable naming rules.

Check the object you are recovering: document.querySelector("#preço").textContent;

Was replaced by: document.getElementsByClassName("precoProduto");

And the HTML, replaces the ID for classe.

And as I’ve already commented, it replaces the .nodeValue for .value. Always check the upper and lower case.

var $input_quantidade = document.getElementById("qtd");
var $output_total = document.getElementById("total");

$input_quantidade.oninput = function() {
    let preco = document.getElementsByClassName("precoProduto");
    preco =  preco[0].innerHTML;
    preco = preco.replace ("R$ ","");
    preco = preco.replace (",", ".");
    preco = parseFloat(preco);

    var quantidade = $input_quantidade.value;
    var total = quantidade * preco;
    total = "R$" + total.toFixed(2);
    total = total.replace(".",",");

    $output_total.value = total;
}
<!DOCTYPE html>
<html>
     <head>
         <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
         <link rel="stylesheet" href="bootstrap/css/open-iconic-bootstrap.css">
         <script type="text/javascript" src="total.js"></script>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width">
           <title>Checkout Mirror Fashion</title>
     </head> 
     <body>
         <div class="jumbotron jumbotron-fluid">
             <div class="container">
                <h1 class="display-4">Ótima escolha!</h1>
                 <dt>Preço</dt>
                 <dd class="precoProduto">R$ 129,90</dd>
            </div>
            <div class="form-group">
                 <label for="qtd">Quantidade:</label>
                 <input type="number" id="qtd" min="1" max="99" value="1" class="form-control">
           </div>
            <div class="form-group">
                 <label for="total">Total:</label>
                 <output for="qtd preço" id="total" class="form-control">R$ 129,00</output>
            </div>
         </div> 
     </body>
</html>

  • thanks,the code works,but when I run the page in the browser,the action does not work.

  • @David, javascript has to be after HTML see here http://kithomepage.com/mult.html It’s working with you and everything, the only change I made was that. value

  • thanks, now it worked.

  • @David, if your server still doesn’t work, check the source code and see if they have been replaced by ? or other characters. If you verify this, you must save your code with UTF8 encoding

  • Yes, even with them it works perfectly. I only pointed them out, by programming best practices. Always check the code structure (order of Styles, scripts and html), indentation, variable names.

  • @Rebecanonate, it’s always great to recommend best practices.

Show 1 more comment

Browser other questions tagged javascript html

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