Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Boa tarde pessoal,
Estou tendo um problema com 2 eventos aqui do javascript, eu tenho essa variável numberInstallments que representa um combo select, nesse combo tem 36 opções que representam a quantidade de parcelas, e dependendo da quantidade de parcelas que eu escolho eu imprimo um texto, exemplo: (se for menor ou igual a 11 parcelas) "Estou pagando o valor de <signalValueInstallment>" num total de 11 parcelas.
Se eu alterar o valor da parcela e manter a quantidade de parcelas o texto deve permanecer, porém, o <signalValueInstallment> deve ser alterado, esta variável é alterada pelo input que tenho no formulário, nesse input tem outro evento de keyup. Está funcionando mais ou mentos, eu consigo alterar o valor do input e ele altera no texto, o problema é que só está aparecendo o texto 2 que deveria aparecer somente para parcelas superiores a 11 parcelas. Alguem sabe dizer o que está errado aí ?
>
Em 28/10/2022 at 19:22, wanderval disse:
Bom você está cometendo um equivoco entre a identificação numberInstallments e o elemento dom html essá variavel presuponho conter apenas um ID ou CLASS sendo assim não contém o mapeamento do valor do input
EX:
const numberInstallments = '#numberInstallments';
const signalValueInstallment = '#signalValueInstallment';
const description = '#description';
$(numberInstallments).on('change', function() { // missing event variable
// why is there such a dependency beetween these 2 events 'change' and 'keyup'?
// I think it's better to uncouple!
$(signalValueInstallment).on('keyup', function(event) {
// numberInstallments is only a simple string, is not possible to handle the dom element this way.
// That is the reason it doesn't not work as expected
if(numberInstallments.value <= 11){
$(description).html('Texto teste 1 R$ ' +signalValueInstallment.value +' .Fim test.');// same here
}else{
$(description).html('Texto teste 2 R$ ' +signalValueInstallment.value +' .Fim test.');// same here
}
})
})
Outra possibilidade é substituir **numberInstallments.value **por** $(numberInstallments ).val() **que é a forma especifica para recuperar valor usando o jquery, mas acredito que você consiga simplemente reutilizando as variaveis de evento assim não precisa processar a busca no dom novamente, já que essa ação já foi realizada.
Ex:
const numberInstallments = '#numberInstallments';
const signalValueInstallment = '#signalValueInstallment';
const description = '#description';
$(numberInstallments).on('change', function(e) {// add event parameter
const selectorValue = e.target.value; // add variable to get select value
$(signalValueInstallment).on('keyup', function(event) {
const inputValue = event.target.value; // add variable to get input value
if(selectorValue <= 11){
$(description).html('Texto teste 1 R$ ' +inputValue +' .Fim test.');
}else{
$(description).html('Texto teste 2 R$ ' +inputValue +' .Fim test.');
}
})
})
Jsbin: [https://jsbin.com/hayicasoro/1/edit?html,js,output](https://jsbin.com/hayicasoro/1/edit?html,js,output)
Ex código um pouco desacoplado
const numberInstallments = '#numberInstallments';
const signalValueInstallment = '#signalValueInstallment';
const description = '#description';
$(numberInstallments).on('change', function(event) {
const selectorValue = event.target.value;
const inputValue = $(signalValueInstallment).val();
handleInstallment(selectorValue, inputValue);
})
$(signalValueInstallment).on('keyup', function(event) {
const selectorValue = $(numberInstallments).val();
const inputValue = event.target.value;
handleInstallment(selectorValue, inputValue);
})
function handleInstallment(selectorValue, inputValue){
if(selectorValue <= 11){
$(description).html('Texto teste 1 R$ ' +inputValue +' .Fim test.');
}else{
$(description).html('Texto teste 2 R$ ' +inputValue +' .Fim test.');
}
}
Jsbin: [https://jsbin.com/cuwamahafo/1/edit?html,js,output](https://jsbin.com/cuwamahafo/1/edit?html,js,output)
Muito obrigado, resolveu meu problema, no caso foi a segunda opção. só não estou conseguindo "reagir" para marcar sua resposta como solução.Que bom que ajudou, sobre reagir ao post fica tranquilo eu to com esse numero 19 já faz mais de 4 anos, embora esse forum esteja ativo, acho que a equipe de desenvolvimento já não atualiza ou corrigi os bugs!
Bom você está cometendo um equivoco entre a identificação numberInstallments e o elemento dom html essá variavel presuponho conter apenas um ID ou CLASS sendo assim não contém o mapeamento do valor do input
EX: