0

Possuo um formulário que ao ser preenchido gera um texto. Quando o botão gerador é clicado e os campos passam pelas minhas validações, o texto é gerado em um terceiro input e eu mostro uma div com o texto de "gerado com sucesso!" e ela some depois de alguns segundos. Essa div já começa como:

visibility: hidden;

Objetivo: Que a div apareça ao gerar a primeira vez e só apareça novamente quando houver nova mudança de texto pelo usuário dentro do input, e não em todo clique (depois do campo ser validado) conforme está configurado no html "onclick". Para isso eu pensei em usar o evento change ou input do javascript de forma cumulativa com o clique, mas ainda não consegui. Ou seja, quando o botão é clicado, ele procura por nova mudança no input, e se houver, a div é mostrada, caso contrário, mostraria um alert por exemplo "escreva um novo texto". Pelo que eu já li, o addEventListener não aceita múltiplos eventos ao mesmo tempo.

HTML

<form id="meu_formulario">
  <input type="text" name="texto_1" id="texto_1">
  <input type="text" name="texto_2" id="texto_2">
  <button type="button" id="gerador" onclick="gerarString()">GERAR TEXTO!</button>
      <div class="gerado">
         <p id="gerado">Texto Gerado com Sucesso!</p>
      </div>
  <input id="string_final" value="" readonly></input> <!-- input 3 para leitura somente -->
</form>

JS

function gerarString() {
    // Aqui eu brinco com as strings e passo tudo pra variável end_string (estou simplificando o código para fácil compreensão)
    var end_string = "...";
    document.getElementById('string_final').value = end_string; // Aqui eu digo que o meu terceiro input vai receber a string completa

    if (document.getElementById('texto_1').value.length >=1 && document.getElementById('texto_2').value.length >= 1) {
        gerado.style.visibility = "visible"; // Se corresponder à minha validação, a div mostra             
        setTimeout(function(){ // Some depois de 3 segundos
        gerado.style.visibility ="hidden";
        }, 3000);
    }
}

JÁ TENTEI: Usar o addEventListener dentro da função clique, mas não consegui.

document.getElementById("meu_formulario").addEventListener("change", function(){
}

OU se no caso eu quisesse apenas uma mudança do segundo input, e não do formulário inteiro

document.getElementById("text_2").addEventListener("change", function(){
}
8
  • Já tentou criar ou uma flag global ou fazer o uso dum atributo data do input para indicar que esse foi modificado? Não endentei o quis dizer com "...Pelo que eu já li, o addEventListener não aceita múltiplos eventos ao mesmo tempo..."? A documentação informa que para registrar mais de uma espera de evento, chame addEventListener() para o mesmo alvo mas com diferentes tipos de evento ou parâmetros. 3/12/2022 às 10:24
  • Não tentei flag global nem o atributo, vou dar uma pesquisada. Quanto ao addeventlistener não aceitar múltiplos eventos, eu vi outra pessa da comunidade stack falando enquanto eu pesquisava minha solução. E eu já tinha lido a documentação e não vi exemplo pra essa associação de eventos que eu pretendo. Sou novato em javascript, então as sintaxes que tentei não funcionaram.
    – luccashenr
    3/12/2022 às 15:28
  • Me manda o link dessa publicação. 3/12/2022 às 16:27
  • Link da publicação que citei..
    – luccashenr
    3/12/2022 às 18:33
  • Tem que ler a frase inteira: ... é importante salientar que o addEventListener não aceita múltiplos eventos ao mesmo tempo. Você precisa criar o listener individualmente para cada evento... 3/12/2022 às 18:47

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .