4

Essa provavelmente é uma pergunta muito simples, mas eu sou novo com programação e preciso de uma ajudinha. Preciso que toda vez que eu clique num botão apareça um label novo, mas precisa adicionar esse label de uma maneira que eu possa adicionar quantos labels forem necessários, mas não sei nem como começar direito. Segue meu código:

edit: me expressei mal, o que eu queria na verdade era o input, consegui resolver obrigado pela ajuda

var botao = document.getElementById("btn");

botao.addEventListener('click', function() {

})
Valor do produto:<input type="text" name="valor1" />
<br />
valor 2: <input type="text" name="valor2" />
<br />
valor final: <input type="text" name="valor final" />
<br/>
<button id="btn">Adicionar novo valor</button>

2
  • E Se o cara clicar 10x fica com 10 labels iguais? O que vai ter nesse label?
    – hugocsl
    Commented 8/02/2019 às 11:55
  • são basicamente são iguais e com label eu me refiro aos inputs, mas a ideia é que eles tenham valores diferentes, pois vão ser somados no final, por causa disso eles precisam ter nomes ou ids diferentes, mas isso eu arrumo depois Commented 8/02/2019 às 12:03

3 Respostas 3

3

Você pode utilizar o innerHTML através do javascript para fazer isso. eu criei uma div somente para dizer aonde quero criar mais um elemento, feito isso eu pego esse elemento com querySelector pelo javascript e uso o innerHTML no click do botão para adicionar o novo elemento.

        var botao = document.getElementById("btn");
        var body = document.querySelector('.box');
          botao.addEventListener('click', function () {
          body.innerHTML += "<label>nova label:</label></br>"
         
        })
<div class="box">
Valor do produto:<input type="text" name="valor1" /><br />
    valor 2:⠀⠀⠀⠀⠀⠀<input type="text" name="valor2" /><br />
    valor final:⠀⠀⠀⠀<input type="text" name="valor final" /> <br/>
  </div>
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀<button id="btn">Adicionar novo valor</button>

1
  • só queria fazer uma correção porque eu acabei me expressando mal o que eu queria na verdade era o input, então eu mudei body.innerHTML += "<label>nova label:</label></br>" para "Novo valor:⠀⠀⠀ <input type=\"text\" name=\"novo valor\" /> <br/>" Commented 8/02/2019 às 14:21
0

O mais indicado seria usar o método createElement (criar um elemento de forma dinâmica). Isso porque ao usar o innerHTML, os valores digitados em todos os campos serão apagados. Agora, para tornar o procedimento mais fácil, crie um span com um id onde serão inseridos os novos campos:

<span id="valores">
   valor 2: <input type="text" name="valor2" />
</span>

O span é útil nesses casos porque ele serve como um contêiner de referência e não afeta o layout.

Veja como ficaria (comentários explicativos no código):

var botao = document.getElementById("btn");

botao.addEventListener('click', function() {

   // pega a span pelo id
   var vals = document.getElementById("valores");

   // cria a tag <br>
   var br = document.createElement("br");
   // insere no span
   vals.appendChild(br);

   // pega todos os inputs dentro do span
   var qtd = document.querySelectorAll("#valores input");
   // como já tem um, soma com 2 para criar uma contagem sequencial
   var names = qtd.length + 2;

   // cria o nó de texto
   var lab = document.createTextNode("Valor "+ names +": ");   
   // insere no span
   vals.appendChild(lab);

   // cria o input
   var inp = document.createElement("input");
   // cria atributo "type"
   inp.type = "text";
   // cria atributo "name" com o valor sequencial
   inp.name = "valor"+names;
   // insere no span
   vals.appendChild(inp);
   
   
});
Valor do produto:<input type="text" name="valor1" />
<br />
<span id="valores">
   valor 2: <input type="text" name="valor2" value="10,20" />
</span>
<br />
valor final: <input type="text" name="valor final" />
<br/>
<button id="btn">Adicionar novo valor</button>

-3

Deixa eu ver se eu entendi, tu quer que ao clicar no botao "adicionar novo valor", seja appendado um label com input para que o usuário possa inserir mais um registro? Se sim, usa um:

$( ".inner" ).append( "<p>Test</p>" );

Onde o .inner tu substitui pelo último registro, pode ser a div que está com os label e input dentro. E onde está o append tu põe o input que tu quer. Se for isso me responde que te ajudo a montar o código.

2
  • Olá @Analise seja bem vinda ao StackOverflow ;) se você olhar na barrinha que fica em cima do editor de texto quando vai responder, veja que tem um botão com esse simbolo <> (ou o atalho ctrl+M), nele você pode adicionar códigos html, css e javascript, assim ele já vem propriamente formatado para melhor leitura dos usuarios e ainda pode ser executado para ver o resultado. Commented 8/02/2019 às 12:03
  • 1
    Atente-se também que ele está usando javascript puro, sem Jquery. Commented 8/02/2019 às 12:07

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 .