[JS] Alterar Texto com valor em input

LokiSchw · Agosto 13, 2015

Bom dia Companheiros!

Estou precisando que, ao colocar números em um input, eles calculem estes números e alterem um texto logo abaixo, ao digitar estes.

Segue código para melhor entendimento:

<body onLoad="CarregaLista();">
<label for="listacliente">Selecione o Cliente:</label>
<select class="lista" id="listacliente"></select><br />
<label for="valor">Valor:</label>
<input type="text" class="campo" id="valor" value=""/><br />
<label for="quantidade">Quantidade:</label>
<input type="text" class="campo" id="quantidade" value=""/><br />
<p class="numero" id="total"><script type="text/javascript">total</script></p>
</body>

meu javascript:

var valor = $("#valor").val()
var quantidade = $("#quantidade").val()
var total = valor * quantidade

Sergio Tomas · Agosto 13, 2015

Bom dia Loki, está faltando ";" no final de cada linha do seu javascript e outro detalhe, os dados que vem do input são strings, então como você quer calcular números você deve converte-las em números como o exemplo abaixo:

    var valor = parseFloat($("#valor").val());
    var quantidade = parseInt($("#quantidade").val());
    var total = valor * quantidade;
    $("#total").text(total);

Creio que isso ja faz funcionar, este é realmente seu problema?

LokiSchw · Agosto 13, 2015

Bom dia Loki, está faltando ";"no final de cada linha do seu javascript., você não especificou com é o seu problema, qual seria?

Não resolveu ainda! Quer que eu poste no fiddle o que eu tenho?

Sérgio, acabei de atualizar os códigos, dá uma olhada lá por favor!!

Onde está escrito "total" no meu html deveria vir o número de "valor" multiplicado por "quantidade", em formato de String e valor. Isso não está ocorrendo!

Obrigado pelo retorno.

Sergio Tomas · Agosto 13, 2015

Olá Loki, ja vi seu código atualizado, eu tbm atualizei minha resposta, no caso você quer colocar o valor calculo em aonde? no select?

LokiSchw · Agosto 13, 2015

Olá Loki, ja vi seu código atualizado, eu tbm atualizei minha resposta, no caso você quer colocar o valor calculo em aonde? no select?

Sérgio,

O valor do cálculo tem que ir na ultima linha antes do </body>. Aqui:

<p class="numero" id="total"><script type="text/javascript">total</script></p>

Sergio Tomas · Agosto 13, 2015

Você ja tentou a minha solução proposta?

    var valor = parseFloat($("#valor").val());
    var quantidade = parseInt($("#quantidade").val());
    var total = valor * quantidade;
    $("#total").text(total);

Aparece algum erro?

LokiSchw · Agosto 13, 2015

Você ja tentou a minha solução proposta?

    var valor = parseFloat($("#valor").val());
    var quantidade = parseInt($("#quantidade").val());
    var total = valor * quantidade;
    $("#total").text(total);

Aparece algum erro?

Alterei o Javascript e nada ocorreu.

Acredito que seja algo errado na sintaxe do HTML.

Estou rodando esses testes neste link:

http://lokigame.6te.net/notas/

Se puder, dá uma olhada por favor!

Obrigado!

@Edit

Fiz algumas alterações no Código:

<html>
	<head>
		<title> Gerador de Notas </title>
		<script type="text/javascript" src="js/jquery-ui.min.js"></script>
		<script type="text/javascript" src="js/motores.js"></script>
	</head>
	<body onLoad="CarregaLista();">
		<label for="listacliente">Selecione o Cliente:</label>
		<select class="lista" id="listacliente"></select><br />
		<label for="valor">Valor:</label>
		<input type="text" class="campo" id="valor" value=""/><br />
		<label for="quantidade">Quantidade:</label>
		<input type="text" class="campo" id="quantidade" value=""/><br />
		<p class="numero" id="total"></p>
	</body>
</html>

Meu JS:

var clientes = ['Selecione','Cliente 1', 'Cliente 2', 'Cliente 3', 'Cliente 4']

function CarregaLista() {
	for (i in clientes) {
		$(".lista").append('<option value="'+clientes[i]+'">'+clientes[i]+'</option>');
	}
}

function Moeda(num){
  x = 0;
  
  if(num < 0) { num = Math.abs(num);   x = 1; }
  
  if(isNaN(num)) num = "0";
  cents = Math.floor((num*100+0.5)%100);
    num = Math.floor((num*100+0.5)/100).toString();
 
  if(cents < 10) cents = "0" + cents;
    for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++)
  num = num.substring(0,num.length-(4*i+3))+'.'+num.substring(num.length-(4*i+3));
		 
  ret = num + ',' + cents; 
  if (x == 1) 
  ret = '-' + ret;
		
  return ret;
}

var valor = parseFloat($("#valor").val());
var quantidade = parseInt($("#quantidade").val());
var total = valor * quantidade;
$("#total").text('R$ '+Moeda(total));

Se eu utilizo um botão para Gerar, ele trás o valor, mas se eu utilizo valores quebrados (7,50 por exemplo) ele arredonda.

Como corrigir este arredondamento e me livrar do botão?

LokiSchw · Agosto 13, 2015

Você ja tentou a minha solução proposta?

    var valor = parseFloat($("#valor").val());
    var quantidade = parseInt($("#quantidade").val());
    var total = valor * quantidade;
    $("#total").text(total);

Aparece algum erro?

Sérgio,

Consegui aqui, obrigado pela ajuda.

Para carregar automaticamente, utilizei a função "onkeypress" no segundo campo.

Para corrigir os valores, vi que no primeiro campo, pelo float, é necessário utilizar o "." - Vou passar um replace nesse campo antes de realizar a função.

Resolvido!

Sergio Tomas · Agosto 13, 2015

Que bom que minha solução funcionou, só peço que marque o meu post como resolvido.

Arquivado

[JS] Alterar Texto com valor em input

Recommended Posts

LokiSchw 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Sergio Tomas 16

Compartilhar este post

Link para o post

Compartilhar em outros sites

LokiSchw 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Sergio Tomas 16

Compartilhar este post

Link para o post

Compartilhar em outros sites

LokiSchw 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Sergio Tomas 16

Compartilhar este post

Link para o post

Compartilhar em outros sites

LokiSchw 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

LokiSchw 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Sergio Tomas 16

Compartilhar este post

Link para o post

Compartilhar em outros sites

Conexão mysql com outro domínio

[Resolvido] JavaScript - Exibir logo dentro da Tabela html

Javascript - Calcular Valores Monetário em Tempo Real

Conteúdo Similar

Fóruns

Tempo Real

Informação importante