-1

Estou iniciando meus estudo em JavaScript e me deparei com uma questão que é pegar o valor (monetário) em uma classe html, tratar e exibir o resultado sem R$ em outro elemento html. Porém não funcionou.

Código:

function myFunction() {
  var test = document.getElementsByClassName("entrada");
  // var test = 'R$ 299,00';

  function getMoney( str )
  {
          return parseInt( str.replace(/[\D]+/g,'') );
  }
  function formatReal( int )
  {
          var tmp = int+'';
          tmp = tmp.replace(/([0-9]{2})$/g, ",$1");
          if( tmp.length > 6 )
                  tmp = tmp.replace(/([0-9]{3}),([0-9]{2}$)/g, ".$1,$2");

          return tmp;
  }


  var int = getMoney( test );
  document.getElementById("saida").innerHTML = (formatReal( int ));

}
<p>Valor do item: <strong class="entrada">R$ 229,00</strong></p>

<button onclick="myFunction()">Clique para tratar</button>

<p>Valor tratado: <span style="color:red" id="saida"></span></p>

3
  • 2
    Em getMoney(test), test é um NodeList (retornado por getElementsByClassName). Portanto, como replace é um método de strings, você não poderá o obter a partir de uma instância de NodeList. Você precisa obter o valor do elemento, isto é, uma string. Talvez esta resposta possa te dar uma ideia adicional desse problema e te dar algumas ideias de como resolvê-lo. :-) 23/10/2020 às 21:12
  • Mas no meu caso Luiz nao preciso de laço... o valor já está em um elemento. Não entendi. 23/10/2020 às 21:28
  • 2
    Ele quis dizer que sua função espera uma string, mas você está passando uma lista de elementos do DOM.
    – bfavaretto
    23/10/2020 às 21:43

2 Respostas 2

1

É como o nosso amigo já falou nos comentários. Você está passando para a sua função getMoney uma nodeList. Essa nodeList é o retorno da função nativa do javascript "document.getElementsByClassName()".

Quando você usa essa função diretamente, ela retorna todos os elementos do DOM que possuem a classe buscada. Por isso o retorno de uma lista.

Enquanto isso, o seu método getMoney espera receber uma string.

A minha sugestão é... Troque isso:

var test = document.getElementsByClassName("entrada");

Por isso:

var test = document.querySelector(".entrada").innerText;
1
  • 1
    Oi Jaderson... aquele caso do iniciante que agora não errará, importante é o conceito da coisa. Sua sugestão funcionou, também recebi um força através do trecho abaixo.... forte abraço! var a = document.getElementsByClassName("skuBestPrice")[0].innerHTML; 27/10/2020 às 14:00
1

Muda o teu elemento strong de class, para id, fica mais fácil trabalhar assim, depois vc pega o innerHTML desse elemento e executa sua função. EX.

<body>

<p>Valor do item: <strong id="entrada">R$ 229,00</strong></p>

<button onclick="myFunction()">Clique para tratar</button>

<p>Valor tratado: <span style="color:red" id="saida"></span></p>
<script>
    function myFunction() {
  var test = document.getElementById("entrada").innerHTML;
  // var test = 'R$ 299,00';

  function getMoney( str )
  {
          return parseInt( str.replace(/[\D]+/g,'') );
  }
  function formatReal( int )
  {
          var tmp = int+'';
          tmp = tmp.replace(/([0-9]{2})$/g, ",$1");
          if( tmp.length > 6 )
                  tmp = tmp.replace(/([0-9]{3}),([0-9]{2}$)/g, ".$1,$2");

          return tmp;
  }


  var int = getMoney( test );
  document.getElementById("saida").innerHTML = (formatReal( int ));

}
</script>
</body>

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 .