Add a new label to every button click

Question

This is probably a very simple question, but I’m new to programming and I need a little help. I need every time I click a button a new label appears, but you need to add that label in a way that I can add as many Abels as necessary, but I don’t even know how to get it right. Follows my code:

Edit: I expressed myself badly, what I really wanted was the input, I managed to resolve thanks for the help

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>

Answer 1

You can use the innerHTML through javascript to do this. I created a div just to say where I want to create one more element, so I take this element with querySelector by javascript and use the innerHTML click to add the new element.

        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>

Answer 2

The most appropriate would be to use the method createElement (dynamically create an element). This is because using innerHTML, the values typed in all fields will be deleted. Now, to make the procedure easier, create a span with a id where the new fields will be inserted:

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

The span is useful in such cases because it serves as a reference container and does not affect the layout.

See how it would look (explanatory comments in the code):

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>

Answer 3

Let me see if I understand, you want to click on the button "add new value", be appendado a label with input so that the user can enter one more record? If yes, use one:

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

Where the .inner you substitute for the last record, it may be the div who is with the label and input inside. And where is the append you put the input that you want. If that’s what you say I’ll help you build the code.