Skip to main content
adicionou 314 caracteres ao conteúdo
Fonte Link
Ricardo Pontual
  • 23,2mil
  • 2
  • 33
  • 64

Código HTML:

Anúncio de vôo Anuncio de vôos Insira as informações abaixo

Vôo

com destino à

Embarque portão

+

Código Javascript: 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)

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>

}

 

Código HTML:

Anúncio de vôo Anuncio de vôos Insira as informações abaixo

Vôo

com destino à

Embarque portão

+

Código Javascript: 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)

}

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>
 

Fonte Link

Clonar input com novos valores, sem que as novas informações afetem as anteriores - JavaScript

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.

Código HTML:

Anúncio de vôo Anuncio de vôos Insira as informações abaixo

Vôo

com destino à

Embarque portão

+

Código Javascript: 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)

}

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