2 eventos conflitando

[joeythai 0]

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í ?

 

 

 

 

 

 

[wanderval 19]

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

 

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

[joeythai 0]

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

 

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

 

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.

[wanderval 19]

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!