0

Estou com um problema que é o seguinte. Estou querendo fazem uma ficha na qual você escreve nome, telefone, problema, etc e ai então as informações preenchidas são imprimidas em uma mascara padrão. Porem eu preciso que aparece a mesma informação em duas mascaras diferentes, no caso colocar a mesma variável em dois lugares distintos. ai esta o código inteiro caso possam me ajudar.

<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
  • 1
    Você tem mais de um elemento com o mesmo id, o que é uma péssima prática. Desse jeito, quando você faz a seleção pelo id é retornado apenas o elemento da primeira ocorrência. 13/02/2019 às 1:47

1 Resposta 1

0

Como já foi dito você está repetindo ids é isto é uma má prática, você pode colocar ao invés de id uma class para os elementos e pegar o valor pelo índice do mesmo:

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>

1
  • 1
    cara muito obrigado bela ajuda, sou iniciante nisso então estou vivendo e aprendendo kkk... 13/02/2019 às 20:17

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 .