Delete information in an HTML element with Javascript

Asked

Viewed 101 times

0

When I write the information on the top board (input), it automatically appears below. However when deleting the information from above it does not delete the information from below.

I tried to put a reset button, but the same thing happens, it just erases the information from above.

Could someone give me an idea or example of how I can erase all information and start again?

Code:

<!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>

javascript html

1 answer

0


You condition the action based on the property value of input. Therefore, if you delete everything at once, the condition will not be met, since it will be empty (''):

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

Note that if you delete characters from fields 1 to 1, the latter will not be removed, since the value would become '' (empty). Thus skipping the whole block within the condition.

To solve, simply remove the conditions and should work as you expect:

        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>

  • Damn I didn’t even think about it, really it’s very easy, vlw by the help. In case I haven’t studied the database part yet, it would be easy to enter this information in a spreadsheet, Excel type?

  • @wilianblack my suggestion is to continue studying the base, rather than already jumping into something more complex. Even because the database is usually in the back end. It will depend on the languages and technologies that you will use. PS: if my answer has solved your problem, do not forget to accept by marking the. ;)

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.