JQuery reaproveitar valor de variável JQuery

26 de fevereiro de 2020

Bom dia!

Não sei se é possível reaproveitar o valor de uma variável para uma outra variável JQuery, eu tenho o seguinte código abaixo:

$(document).ready(function(){
	
	$('#parcela').on('change', function(){
		var joia = $('#joia').val();
		var parc = $('#parcela').val();
		var resultado = (joia/parc);
		$('#conta1').html('Jóia R$: '+resultado.toFixed(2)+' +');
	});
	
	$('#qtde').on('change', function(){
		var escudo = $('#escudo').val();
		var qtde = $('#qtde').val();
		var resultado2 = (escudo*qtde);
		$('#conta2').html('Escudo R$: '+resultado2.toFixed(2)+' =');
	});
	
	
	$('#totalcontas').html('Total R$'+(resultado + resultado2));
	
});

É para exibição de campos calculados na tela....eu recebebo o valor da Jóia do banco de dados, recupero ele e aplico um parcelamento de N vezes e me retorna o valor da parcela

por exemplo

Jóia R$80,00 / 6 parcelas = Parcela de R$13,33

O outro valor é do escudo, este não é parcelado e sim multiplicado pela quantidade de vezes que voce quer comprar, por exemplo:

Escudo R$50,00 x 2 = Total R$100,00

No #totalcontas, eu preciso exibir a soma da parcela da jóia + total do escudo, R$13,33 + R$100,00 = Total 113,33

Não sou bom com javascript ou jQuery, mas sei que tô fazendo isso de forma errada, tem como fazer isso diferente, ou há uma uma melhor forma que me dê o resultado esperado?

GabrielSennaMs · 26 de fevereiro de 2020

@fspjonny Boa tarde!

Bom Jquery é uma bliblioteca javascript e não uma linguagem, então ela não possui uma variavel propriamente dita "variável Jquey".

Olhando o código publicado é visivel o problema de escopo que você está tendo, caso queira entender melhor aqui tem um artigo muito bom! https://imasters.com.br/desenvolvimento/escopos-em-javascript, para resolver esse problema você pode declarar uma variavel em um escopo acima e passar o resultado para ela, assim você vai conseguir acessar ela.

2 horas atrás, fspjonny disse:

Não sou bom com javascript ou jQuery, mas sei que tô fazendo isso de forma errada, tem como fazer isso diferente, ou há uma uma melhor forma que me dê o resultado esperado?

Bom eu fiz um exemplo.

<!DOCTYPE html>
<html>
    <head>
        <title>Teste</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <style>
            html, body {
                width: 100%;
                height: 100%;
                display: flex;
            }

            .form {
                max-width: 600px;
                margin: auto;
                padding: 1em;
                box-shadow: 1px 1px 15px #999;
            }

        </style>
    </head>
    <body>
        <div class="form">
            <div>
                <label>Valor da Joia: </label>
                <input id="joia" type="number" value="0"><br>
                <label>Número de parcela: </label>
                <input id="parcela" type="number" value="0" >
                <p>Valor: R$ <span id="resultado_1">0</span></p>
                <br><br>
                <label>Valor do escudo: </label>
                <input id="escudo" type="number" value="0"><br>
                <label>Quantidade de escudo: </label>
                <input id="quantidade" type="number" value="0">
                <p>Valor: R$ <span id="resultado_2">0</span></p>
            </div>
            <hr>
            <p><b>Total: </b> R$ <span id="total">0</span></p>
        </div>

        <script>

            // Constante com todos os valores.
            const valores = {
                "total": 0,
                "joia": 0,
                "parcela": 0,
                "escudo": 0,
                "quantidade": 0,
                "resultado_1": 0,
                "resultado_2": 0
            };


            // Chamando Jquery para setar eventos nos inputs.
            $(function(){ // == $(document).ready(function(){
                $('#joia').on('change', calcular);
                $('#parcela').on('change', calcular);
                $('#escudo').on('change', calcular);
                $('#quantidade').on('change', calcular);
            });

            // Função para calcular os valores e guardar na constante valores.
            function calcular()
            {
                // Pegando os valores e guardando.
                valores['joia'] = $('#joia').val(); 
                valores['parcela'] = $('#parcela').val();
                valores['escudo'] = $('#escudo').val();
                valores['quantidade'] = $('#quantidade').val();

                // Utilizando os valores e fazendo os calculos.
                valores['resultado_1'] = (valores['joia'] / valores['parcela']).toFixed(2);
                valores['resultado_2'] = (valores['escudo'] * valores['quantidade']).toFixed(2);
                valores['total'] = parseFloat(valores['resultado_1'] + valores['resultado_2']);

                // Escrevendo os valores para o usuário
                updateValor(conveterReal(valores['resultado_1']), 'resultado_1');
                updateValor(conveterReal(valores['resultado_2']), 'resultado_2');
                updateValor(conveterReal(valores['total']), 'total');

            }

            // Função para conveter valores em formado BR.
            function conveterReal(int)
            {
                let tmp = int+'';

                tmp = tmp.replace(".", "");
                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 == 'Infinity' || tmp == 'NaN') ? 0 : tmp;
            }

            // Função para alterar os valores dos elementos.
            function updateValor(valor, id)
            {
                let elen = $('#'+id);

                if(elen)
                {
                    elen.html(valor);
                }
            }

        </script>
    </body>
</html>

Espero que isso ajude!

26 de fevereiro de 2020

Ok, obrigado pelos toques, tô querendo melhorar no front, mas tá difícil arranjar tempo para me dedicar!

O resultado era esse mesmo, só que achei que seria um código menor.

Mas não tô te dizendo com isso que é ruim, porque primeiro não entendo muito javascript e jQuery a não ser o basicão de manipular certas informações na tela, uma coisa mais elaborada como esta vou apanhar feio e segundo EU que tô pedindo ajuda...kkkk!.

Eu lí alguma coisa sobre declarar as variáveis no escopo externo e ví um exemplo declarando as variáveis fora do escopo, era algo assim:

$(document).ready(function(){
  
  var valor1;
  var valor2;
  
  $('#Objeto').on('alguma coisa', function(){
	  valor1 = alguma coisa.....
  	  valor2 = alguma outra coisa...
  });
    
});

Mas não deu certo ou eu não consegui fazer dar certo. Isso acima faz algum sentido para você?

Mas, obrigado mais uma vez pela ajuda @GabrielSennaMs

GabrielSennaMs · 26 de fevereiro de 2020

@fspjonny O código não é muito grande.

16 minutos atrás, fspjonny disse:
$(document).ready(function(){
  
  var valor1;
  var valor2;
  
  $('#Objeto').on('alguma coisa', function(){
	  valor1 = alguma coisa.....
  	  valor2 = alguma outra coisa...
  });
    
});
  
Mas não deu certo ou eu não consegui fazer dar certo. Isso acima faz algum sentido para você?

Sentido faz, agora vai depender de como você vai aplicar.

Exemplo:

<!DOCTYPE html>
<html>
  <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  </head>
  <body>
  <button>Click me!</button>
	<script>
    $(document).ready(function(){
    	var num = 0; // Número de clicks
    
    	$("button").on('click', function(){
			num++;
            alert(`Você clickou ${num} vezes nesse botão!`);
        });
    });
    </script>
  </body>
</html>

26 de fevereiro de 2020

27 minutos atrás, GabrielSennaMs disse:

@fspjonny O código não é muito grande.

Eu sou de Python/Django, então me perdoe..., tô dando manutenção em uma página PHP e tentando(com sua nobre ajuda), acertar e implementar algumas funcionalidades do cliente, enquanto a frontend daqui não volta da licença.

Ou seja, tô me lascando até o esmalte dos dentes.

27 minutos atrás, GabrielSennaMs disse:

Sentido faz, agora vai depender de como você vai aplicar.

Exemplo:


<!DOCTYPE html>
<html>
  <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  </head>
  <body>
  <button>Click me!</button>
	<script>
    $(document).ready(function(){
    	var num = 0; // Número de clicks
    
    	$("button").on('click', function(){
			num++;
            alert(`Você clickou ${num} vezes nesse botão!`);
        });
    });
    </script>
  </body>
</html>

Saquei...show esse exemplo!

Curiosamente, saberia me dizer de onde esse valor estaria vindo?

adicionado 1 minuto depois

ah! e não mudei seu código, eu já vou sim colocar nele mais um valor que tem que entrar e não considerei a mensalidade

<script type="text/javascript">
	
const valores = {
	"joia": 0,
    "parcela": 0,
    "escudo": 0,
    "qtde": 0,
    "conta1": 0,
    "conta2": 0,
	"totalcontas": 0	
};
	
$(function(){
	
	$('#joia').on('change', calcular);
	$('#parcela').on('change', calcular);
	$('#escudo').on('change', calcular);
	$('#qtde').on('change', calcular);
	
});
	
function calcular(){
	valores['joia'] = $('#joia').val(); 
	valores['parcela'] = $('#parcela').val();
    valores['escudo'] = $('#escudo').val();
    valores['qtde'] = $('#qtde').val();

    valores['conta1'] = (valores['joia'] / valores['parcela']).toFixed(2);
    valores['conta2'] = (valores['escudo'] * valores['qtde']).toFixed(2);
    valores['totalcontas'] = parseFloat(valores['conta1'] + valores['conta2']);

    updateValor(conveterReal(valores['conta1']), 'conta1');
    updateValor(conveterReal(valores['conta2']), 'conta2');
    updateValor(conveterReal(valores['totalcontas']), 'totalcontas');
}

function conveterReal(int){
	let tmp = int+'';
	
	tmp = tmp.replace(".", "");
    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 == 'Infinity' || tmp == 'NaN') ? 0 : tmp;
}

function updateValor(valor, id){
	let elen = $('#'+id);
    if(elen){
		elen.html(valor);
    }
}

adicionado 44 minutos depois

Não sei porque mas a escudo, não está sendo somado, só aumenta as casa decimais no total, até o seu exemplo está assim...

Veja que os valores individuais estão corretos, mas a soma total não.

GabrielSennaMs · 26 de fevereiro de 2020

@fspjonny Faz uma modificação no código

// De
valores['total'] = parseFloat(valores['resultado_1'] + valores['resultado_2']);
// Para
valores['total'] = parseFloat(valores['resultado_1']) + parseFloat(valores['resultado_2']);

26 de fevereiro de 2020

1 hora atrás, GabrielSennaMs disse:

@fspjonny Faz uma modificação no código


// De
valores['total'] = parseFloat(valores['resultado_1'] + valores['resultado_2']);
// Para
valores['total'] = parseFloat(valores['resultado_1']) + parseFloat(valores['resultado_2']);

Beleza era isso mesmo!, obrigado @GabrielSennaMs