2

Estou lendo um livro sobre JavaScript, porém em determinada parte o código que consta no livro não funciona.

A parte é:

var qtyElements = produto[i].getElementsByClassName("quantity");
var qtyText = qtyElements[0].value;
var quantity = moneyTextToFloat(qtyText);
console.log(quantity);

Era para retornar a quantidade de uma classe, porém no console me retorna NaN.

Código completo:

function moneyTextToFloat(text){
  var clean = text.replace("R$","").replace(",",".");
  return parseFloat(clean);
}

function floatToMoney(value){
  var text = (value < 1 ? "0" : 0 ) + Math.floor(value * 100);
  text = "R$" + text;
  return text.substr(0, text.length -2) + "," + text.substr(-2);
}
function readTotal(){
  var total = document.getElementById("total");
  return moneyTextToFloat(total.innerHTML);
}
function writeTotal(value){
  var total = document.getElementById("total");
  total.innerHTML = floatToMoney(value);
}
var totalProdutos = 0;
var produto = document.getElementsByClassName("produto");
for (let i = 0; i < produto.length; i++){
  var priceElements = produto[i].getElementsByClassName("price");
  var priceText = priceElements[0].innerHTML;
  var price = moneyTextToFloat(priceText);


  var qtyElements = produto[i].getElementsByClassName("quantity");
  var qtyText = qtyElements[0].value;
  var quantity = moneyTextToFloat(qtyText);
  console.log(quantity);

}
<html>
<head>
  <title>BIBLIOTECA</title>
  <meta charset="utf-8">

</head>
<body>
    <table>
      <tbody>	
        <tr class="produto">
          <td class="td"><div class="price">R$29,90</div></td>
          <td><input type="number" class="quantity"></td>
        </tr>
        <tr class="produto">
          <td><div class="price">R$59,90</div></td>
          <td> <input type="number" class="quantity">
          </td>
        </tr>
        <tr class="produto">
          <td><div class="price">R$99,90</div></td>
          <td><input type="number" class="quantity"></td>
        </tr>
      </tbody>

      <tr>
        <td></td>
        <td>Total de compras</td>
        <td><div id="total">R$ 189,90</div></td>
        <td></td>
      </tr>
    </table>

<script type="text/javascript" src="JS/carrinhoDeCompra.js"></script>
</body>
</html>

2
  • 2
    Os inputs não tem value por isso que retorna NaN. Coloque values nos inputs, ex: value="10" fica assim <input type="number" class="quantity" value="10">
    – user60252
    Commented 14/12/2018 às 15:51
  • 1
    É o que o vovô @LeoCaracciolo falou, mas para evitar o NaN, coloque uma Avaliação de curto-circuito na variável: var qtyText = qtyElements[0].value || '0';. Assim, se o campo for vazio, será igual a 0.
    – Sam
    Commented 14/12/2018 às 16:25

1 Resposta 1

3

Ele está retornando. Neste caso, parseFloat("") out parseFloat(null) retorna NaN, pois não há um número. NaN significa Not a Number. Então se você quer que o resultado seja zero quando não houver um número dentro do teu campo você pode:

1 - Forçar zero caso o resultado seja NaN:

return parseFloat(clean) || 0;

2 - Fazer que o valor padrão do input seja 0:

<input type="number" class="quantity" value="0">
2
  • Obg, funcionou perfeitamente agora
    – Yan Silva
    Commented 14/12/2018 às 17:14
  • De nada, colega! Commented 24/01/2019 às 20:32

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .