Blocked forms for editing

Question

Good afternoon ! Friends, I created layout to insert materials in the stock, one item per line. If the person wants additional items, click on the button and a new div is inserted into Html. Follow HTML code:

          <div class="col-12 d-flex" id="info-produto">
            <div class="col-md-4 mt-3">
              <label for="produto">Produto*</label>
              <input type="text" id="produto" class="form-control is valid" required>
            </div>
            <div class="col-md-2 mt-3">
              <label for="unidade-medida">Unidade de medida*</label>
              <select id="unidade-medida" class="form-control">
                <option value="unidade">Unidade</option>
                <option value="caixa">Caixa</option>
                <option value="metro">Metro</option>
              </select>
            </div>
            <div class="col-md-1 mt-3">
              <label for="quantidade">QTD*</label>
              <input type="number" id="quantidade" class="form-control">
            </div>
            <div class="col-md-2 mt-3">
              <label for="quantidade-por-unidade">QTD/UND*</label>
              <input type="number" id="quantidade-por-unidade" class="form-control">
            </div>
            <div class="col-md-1 mt-3">
              <fieldset disabled="disabled">
                <label for="total">Total</label>
                <input type="number" id="total" class="form-control">
              </fieldset>
            </div>
            <div class="col-md-2 mt-3">
              <label for="valor">Valor</label>
              <input type="text" id="valor" class="form-control">
            </div>
          </div>
        </div>
        <button class="btn btn-success mt-3 ml-3" id="adicionar-outro-produto">Adicionar mais itens</button>
      </section>
    </div>

Follows JS code:

var botao = document.querySelector('#adicionar-outro-produto')
botao.addEventListener("click",function(){

  var divproduto = document.createElement('div')
  var produto = document.createElement('input:text')
  produto.classList.add("form-control")
  divproduto.appendChild(produto)
  divproduto.classList.add('col-md-4')


  var divunidade = document.createElement('div')
  var unidade = document.createElement('select')
  var opcaoum = document.createElement('option')
  opcaoum.textContent="Unidade"
  var opcaodois = document.createElement('option')
  opcaodois.textContent="Caixa"
  var opcaotres = document.createElement('option')
  opcaotres.textContent="Metro"
  unidade.appendChild(opcaoum)
  unidade.appendChild(opcaodois)
  unidade.appendChild(opcaotres)
  unidade.classList.add("form-control")
  divunidade.classList.add('col-md-2')
  divunidade.appendChild(unidade)

  var divquantidade = document.createElement('div')
  var quantidade = document.createElement('input:number')
  quantidade.classList.add("form-control")
  divquantidade.classList.add('col-md-1')
  divquantidade.appendChild(quantidade)

  var divqtdunidade = document.createElement('div')
  var qtdunidade = document.createElement('input:number')
  qtdunidade.classList.add("form-control")
  divqtdunidade.classList.add('col-md-2')
  divqtdunidade.appendChild(qtdunidade)

  var divtotal = document.createElement('div')
  var fild = document.createElement('fieldset')
  var total = document.createElement('input:number')
  total.classList.add("form-control")
  fild.appendChild(total)
  divtotal.classList.add('col-md-1')
  divtotal.appendChild(fild)

  var divvalor= document.createElement('div')
  var valor = document.createElement('input:text')
  divvalor.appendChild(valor)
  valor.classList.add('form-control')
  divvalor.classList.add('col-md-2')

  var infoprodutos = document.createElement('div')
  infoprodutos.appendChild(divproduto)
  infoprodutos.appendChild(divunidade)
  infoprodutos.appendChild(divquantidade)
  infoprodutos.appendChild(divqtdunidade)
  infoprodutos.appendChild(divtotal)
  infoprodutos.appendChild(divvalor)

  infoprodutos.classList.add('d-flex')
  infoprodutos.classList.add('col-md-12')
  infoprodutos.classList.add('mt-3')

  var adesao = document.querySelector('#pai')
  adesao.appendChild(infoprodutos)

})

However, the new forms entered are not editable. What to do ?

Answer 1

Hello, the problem is on the line with createelement, cannot declare the element by defining the type property as it is being done input:number. To do this create the element only with input, and then assign the desired field type.

var quantidade = document.createElement('input');
quantidade.type = "number";

or

var quantidade = document.createElement('input');
quantidade.setAttribute("type", "number");

see

var element = Document.createelement(nameDaTag);

nameDaTag is a string that specifies the type of the element to be created. The node of the created element is initialized with the value of the nameDaTag. Do not use qualified names (such as "html:a") with this method.

For more details https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement