print the same variable in two different places

Question

print the same variable in two different places

Asked 5 years, 10 months ago

Viewed 61 times

0

I have a problem here. I’m wanting to make a file in which you write name, phone, problem, etc and then the filled information is printed in a standard mask. But I need the same information to appear in two different masks, in case you put the same variable in two different places. There’s the whole code if you can help me.

<html>

  <head>
    <title>Teste</title>
  </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 id="cliente"></span><br>
       Contatos: <span id="tel"></span>\<span id="cont"></span><br>
       descrição do problema: <span id="pro"></span></p>
<br><br><br>
problema resolvido
<br><br><br>
    <p>Cliente: <span id="cliente"></span><br>
       Contatos: <span id="tel"></span>\<span id="cont"></span><br>
       descrição do problema: <span id="pro"></span></p>
    
  </body>

  <script type="text/javascript">
    var cliente = document.getElementById('cliente');
    var cli = document.getElementById('nome');
 
    var tel = document.getElementById('tel');
    var fone = document.getElementById('fixo');

    var cont = document.getElementById('cont');
    var tato = document.getElementById('contato');

    var pro = document.getElementById('pro');
    var blema = document.getElementById('problema');

    function insere() {
      var nome = cli.value;
      if (nome == '') nome = 0;
      cliente.innerHTML = nome;

      var fixo = fone.value;
      if (fixo == '') fixo = 0;
      tel.innerHTML = fixo;

      var contato = tato.value;
      if (contato == '') contato = 0;
      cont.innerHTML = contato;

      var problema = blema.value;
      if (problema == '') problema = 0;
      pro.innerHTML = problema;
    }
  </script>
</html>

1

You have more than one element with the same id, which is bad practice. Thus, when you make the selection by id only the element of the first occurrence is returned.

– G. Bittencourt

2019/02/13 at 01:47

1 answer

Browser other questions tagged javascript

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

by LeAndrade • **8,475** points · Answer 1 · 2019-02-13T10:56:17+00:00

As has been said you are repeating ids is this a bad practice, you can put instead of id a class for the elements and take the value by its index:

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;
  }
  
}

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>