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>