0

Quando escrevo as informações no quadro de cima (input), ele automaticamente aparece em baixo. Porém ao apagar as informações de cima ele não apaga as de baixo.

Já tentei colocar um botão de redefinir, porem ocorre a mesma coisa, ele só apaga as informações de cima.

Alguém poderia me da uma ideia ou exemplo de como posso fazer apagar todas as informações e começar de novo?

Código:

<!DOCTYPE html>
<html>
<head>
    <style>
        
    </style>
    <script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
    </head>
<body>
    Nome <input id='nome' type='text' value='' onkeyup="insere()" /> Cont 1 <input id='fixo' type='text' value='' onkeyup="insere()" /> Cont 2 <input id='contato' type='text' value='' onkeyup="insere()" /> Problema <input id='problema' type='text' value=''
  onkeyup="insere()" />
<br><br><br> problema continua
<br><br><br>
<p>
  Cliente: <span class="cliente"></span><br> 
  Contatos: <span class="tel"></span>\<span class="cont"></span><br>  descrição do problema: <span class="pro"></span>
</p>
<br><br><br> problema resolvido
<br><br><br>
<p>
  Cliente: <span class="cliente"></span><br> 
  Contatos: <span class="tel"></span>\<span class="cont"></span><br> descrição do problema: <span class="pro"></span>
</p>
    <script type="text/javascript">
        var cliente = document.getElementById('nome');
var fone = document.getElementById('fixo');
var contato = document.getElementById('contato');
var problema = document.getElementById('problema');

var cliente1 = document.getElementsByClassName('cliente')[0];
var cliente2 = document.getElementsByClassName('cliente')[1];

var tel1 = document.getElementsByClassName('tel')[0];
var tel2 = document.getElementsByClassName('tel')[1];

var cont1 = document.getElementsByClassName('cont')[0];
var cont2 = document.getElementsByClassName('cont')[1];

var pro1 = document.getElementsByClassName('pro')[0];
var pro2 = document.getElementsByClassName('pro')[1];


function insere() {
 
  if (cliente.value !== '') {
    cliente1.innerHTML = cliente.value;
    cliente2.innerHTML = cliente.value;
  }

  
  if (fone.value !== '') {
    tel1.innerHTML = fone.value;
    tel2.innerHTML = fone.value;
  }
  
  if (contato.value !== '') {
    cont1.innerHTML = contato.value;
    cont2.innerHTML = contato.value;
  }
  
  if (problema.value !== '') {
    pro1.innerHTML = problema.value;
    pro2.innerHTML = problema.value;
  }
  
}
    </script>
</body>
</html>

1 Resposta 1

0

Você condiciona a ação baseando-se na propriedade value do input. Logo, se você apagar tudo de uma única vez, a condição não será atendida, já que estará vazio (''):

if (cliente.value !== '') { // [...]

Repare que se você apagar os caracteres dos campos 1 a 1, o último não será removido, já que o value passaria a ser '' (vazio). Pulando, assim, todo o bloco dentro da condição.

Para solucionar, simplesmente remova as condições e deve funcionar como você espera:

        var cliente = document.getElementById('nome');
var fone = document.getElementById('fixo');
var contato = document.getElementById('contato');
var problema = document.getElementById('problema');

var cliente1 = document.getElementsByClassName('cliente')[0];
var cliente2 = document.getElementsByClassName('cliente')[1];

var tel1 = document.getElementsByClassName('tel')[0];
var tel2 = document.getElementsByClassName('tel')[1];

var cont1 = document.getElementsByClassName('cont')[0];
var cont2 = document.getElementsByClassName('cont')[1];

var pro1 = document.getElementsByClassName('pro')[0];
var pro2 = document.getElementsByClassName('pro')[1];


function insere() {
    cliente1.innerHTML = cliente.value;
    cliente2.innerHTML = cliente.value;
    pro1.innerHTML = problema.value;
    pro2.innerHTML = problema.value;
    cont1.innerHTML = contato.value;
    cont2.innerHTML = contato.value;
    tel1.innerHTML = fone.value;
    tel2.innerHTML = fone.value;
}
<!DOCTYPE html>
<html>
<head>
    <style>
        
    </style>
    <script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
    </head>
<body>
    Nome <input id='nome' type='text' value='' onkeyup="insere()" /> Cont 1 <input id='fixo' type='text' value='' onkeyup="insere()" /> Cont 2 <input id='contato' type='text' value='' onkeyup="insere()" /> Problema <input id='problema' type='text' value=''
  onkeyup="insere()" />
<br><br><br> problema continua
<br><br><br>
<p>
  Cliente: <span class="cliente"></span><br> 
  Contatos: <span class="tel"></span>\<span class="cont"></span><br>  descrição do problema: <span class="pro"></span>
</p>
<br><br><br> problema resolvido
<br><br><br>
<p>
  Cliente: <span class="cliente"></span><br> 
  Contatos: <span class="tel"></span>\<span class="cont"></span><br> descrição do problema: <span class="pro"></span>
</p>
    <script type="text/javascript">
    // adicionado no snippet
    </script>
</body>
</html>

2
  • Caraca eu nem se quer pensei nisso, realmente é muito fácil, vlw pela ajuda. No caso eu ainda não estudei a parte de banco de dados, seria fácil introduzir essas informações em uma planilha, tipo do Excel? 19/04/2019 às 20:35
  • @wilianblack minha sugestão é que continue estudando a base, ao invés de já pular para algo mais complexo. Até porque banco de dados, normalmente, fica no back-end. Vai depender da linguagens e tecnologias que vc vai utilizar. PS: se a minha resposta solucionou seu problema, não se esqueça de aceitar marcando o ✔️. ;)
    – LipESprY
    19/04/2019 às 22:16

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

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .