0

Olá, estou criando uma pagina com o intuito de auxiliar em anuncios de vôos. Contém 4 inputs onde serão inseridas informações que deverão aparecer na tela para o usuario junto com frases já prontas. Tentei criar um clone desses inputs sem que as novas informações afetassem os anteriores, mas percebir que preciso adicionar esses novos inputs como se fossem uma nova div para que clone sem que exista interferencia entre elas. o primeiro input funciona normalmente, porem os clones já não funcionam.

var comp = "";
var voo = "";
var dest = "";
var emb = "";

function enviar(){
  comp = document.getElementById("inputComp")
  voo = document.getElementById("numVoo")
  dest=document.getElementById("destino")
  emb=document.getElementById("nEmb")
  
  document.getElementById("mostrarComp").innerHTML = comp.value;
  document.getElementById("mostrarVoo").innerHTML = voo.value;
  document.getElementById("mostrarDest").innerHTML = dest.value;
  document.getElementById("mostrarEmb").innerHTML = emb.value;
}

function clone(){
  const dadosCloner = document.querySelector("#formulario").cloneNode("dadosCloner")
  document.querySelector("#formulario").after(dadosCloner)
}
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Anúncio de vôo</title>
</head>
<body>
  <header>
    <strong> Anuncio de vôos</strong> 
  </header>
   
  <div id="inf">
    <strong> Insira as informações abaixo </strong> 
  </div>
  
<div id="formulario">


  <input type="text" name="inputComp" id="inputComp">
  <input type="text" name="numVoo" id="numVoo">
  <input type="text" name="destino" id="destino">
  <input type="text" name="nEmb" id="nEmb">
  <input type ="submit" name="enviar" onclick="enviar()">
  <input type ="reset" name="Limpar Dados" onclick="reset()">
  
  <h4 id="mostrarComp"><h4>Vôo</h4></h4>
  <h4 id="mostrarVoo"><h4>com destino à</h4></h4>
  <h4 id="mostrarDest"><h4>Embarque portão</h4></h4>
  <h4 id="mostrarEmb"></h4>

  </div>
  
  <button onclick ="clone()" id="clone1"> + </button>
  
  <script src="vooanuncio.js"></script>
  
</body>
</html>

Existe alguma maneira de resolver isso com javaScript Puro? (obs: Sou iniciante)

2
  • 1
    olá, seu código é confuso, não da pra entender bem o que quer fazer... "o primeiro input funciona normalmente, porem os clones já não funcionam" o que quer dize com "não funcionam"? pelo que vi, está pegando os valores do input pelo ID, o ID deve ser único, logo isso não vai funcionar com clone, os elementos não podem ter o mesmo ID, mas eu código faz extamente o que tem ai: clica no botão e clona tudo que tem na DIV, agora não da pra saber o que pretende fazer, fica difícil ajudar... uma melhoria: as 4 variáveis só são usandas dentro da função, não precisa declarar elas antes fora da função Commented 28/12/2022 às 9:29
  • Eu editei seu código para colocar as variáveis dentro do escopo da função, pois ela é usada só ali Commented 28/12/2022 às 12:22

1 Resposta 1

-1

Se o objetivo é clonar os objetos, você não pode usar ids pois isso quebra a sua aplicação, lembrando que ids devem ser únicos em toda a página, evite usá-los se deseja manipular seus objetos desta forma. Abaixo eu coloquei um modo que usa classes para que o página não quebre. Porém acredito que você deva estudar como colocar os eventos de enviar dinamicamente usando addListenner e lambida function, porque o evento enviar sempre buscará no formulário origem e nos campos de origem do jeito que você fez (faça uma pergunta separada se não souber como resolver esse problema).

 <html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Anúncio de vôo</title>
</head>
<body>
  <header>
    <strong> Anuncio de vôos</strong> 
  </header>
   
  <div id="inf">
    <strong> Insira as informações abaixo </strong> 
  </div>
<div class="original">
   <!--aqui é o form original-->
  <div class="formulario">
    <input type="text" name="inputComp" class="inputComp">
    <input type="text" name="numVoo" class="numVoo">
    <input type="text" name="destino" class="destino">
    <input type="text" name="nEmb" class="nEmb">
    <input type ="submit" name="enviar" onclick="enviar()">
    <input type ="reset" name="Limpar Dados" onclick="reset()">

    <h4 class="mostrarComp"><h4>Vôo</h4></h4>
    <h4 class="mostrarVoo"><h4>com destino à</h4></h4>
    <h4 class="mostrarDest"><h4>Embarque portão</h4></h4>
    <h4 class="mostrarEmb"></h4>

   </div>
</div>  

 <div class="clones">
   <div class="first"></div>
   <!--aqui vao ser postos os clones-->
 </div>
  
  <button onclick ="clone()" id="clone1"> + </button>
  
  <script src="vooanuncio.js"></script>
  
</body>
</html>

E o JS:

function enviar(){
  const comp = document.querySelector(".original .inputComp")
  const voo = document.querySelector(".original .numVoo")
  const dest=document.querySelector(".original .destino")
  const emb=document.querySelector(".original .nEmb")
  
  document.getElementById("mostrarComp").innerHTML = comp.value;
  document.getElementById("mostrarVoo").innerHTML = voo.value;
  document.getElementById("mostrarDest").innerHTML = dest.value;
  document.getElementById("mostrarEmb").innerHTML = emb.value;
}

function clone(){
  const dadosCloner = document.querySelector(".original .formulario").cloneNode("dadosCloner");
  document.querySelector(".clones .first").after(dadosCloner);
}

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 .