loop Loop que insere Input Text no html

[SilverFV 0]

Bom dia,

Gostaria de pedir ajuda pois não acho nada que me ajude no que estou querendo fazer.

Eu quero que o usuario insira um valor em um input e ao clicar em um botão ira sera inserido no formulario a quantidade de input Text igual ao valor digitado e então ele colocaria um valor em cada um desses inputs e somaria e retornaria o valor em um popup ou em uma outra parte do formulario, mas só somaria se nenhum deles estivesse vazio(essa parte da soma é a mais fácil) e caso ele coloque o valor 0 ou aperte um botão limpar os inputs inseridos seriam deletados.

 

- Att

[wanderval 19]

Olha esse código:

HTML:

<div class="container">
    <section class="container-controls">
      <label>
        <input type="text" id="numberFields" />
        <button 
           type="button" 
           onclick="buildFields()">
             build fields
        </button>
      </label>
    </section>
    
    <section
      class="container-fields"
      id="container-fields">
    </section>
    
    <section class="container-result">
      <label>Result:</label>
      <span id="result">0</span>
    </section>
  </div>

 

JS:

function buildFields() {
  const numberOfFields = document.getElementById('numberFields').value;
  
  reset('container-fields'); 
  builderFields(numberOfFields);
}

function builderFields(numberOfFields) {
  const container = document.getElementById('container-fields');
  const form = createForm('form-fields');
  
  for(let fieldIndex = 1; fieldIndex <= numberOfFields; fieldIndex++) {
    
    const div = createDiv('container-row');
    const label = createLabel(fieldIndex);
    const input = createInput('fields', fieldIndex);
   
    div.appendChild(label);
    div.appendChild(input);
    
    form.appendChild(div);
    
    container.appendChild(form);
  }
  
  if (numberOfFields) {
    const button = createButton('calc()', 'calc');
    container.appendChild(button);
  }
}

function calc() {
  const formFields = document.getElementsByClassName('fields');
  const resultField = document.getElementById('result');
  
  let total = 0;
  
  for(let fieldIndex = 0; fieldIndex < formFields.length; fieldIndex++) {
    const currentValue = parseFloat(formFields[fieldIndex].value);
    
    if (currentValue) {
      total += currentValue;
    }  
  }
  
  resultField.innerHTML = total;
}

// Utils
function reset(elementId) {
  document.getElementById(elementId).innerHTML = '';
}

function createDiv(classField) {
  var element = document.createElement("div");
  element.classList.add(classField);
  
  return element;
}

function createInput(classField, index) {
  var element = document.createElement("input");
  element.setAttribute("type", "text");
  element.classList.add(classField, classField + '-' + index);
  
  return element;
}

function createButton(method, labelButton) {
  var element = document.createElement("button");
  var text = document.createTextNode(labelButton);
  element.setAttribute("onclick", method);
  
  element.appendChild(text);
  
  return element;
}

function createForm(classField) {
  var element = document.createElement("form");
  element.setAttribute("id", classField);
  element.classList.add(classField);
  
  return element;
}

function createLabel(textLabel) {
  var element = document.createElement("label");
  var text = document.createTextNode(textLabel);
  
  element.appendChild(text);
  
  return element;
}

jsbin: https://jsbin.com/zevocatida/1/edit?html,js,output