Su problema clave es cómo está usando su bucle . i = va no va a lograr lo que quieres. Debería ser una verificación de que el índice en la iteración sea menor que el número representado por el valor en su entrada. Debería ser i < va .

El otro problema es que no está agregando al HTML, solo asegurándose de que el HTML sea solo una entrada.

Ajusté el código en su pregunta para eliminar el JS en línea y usar addEventListener en su lugar, y también para usar una matriz para almacenar el HTML creado a partir del bucle que luego se puede aplicar al elemento de extracción.

 // Cache the elements outside of the loop // and attach a change listener to the noPi element const extract = document.getElementById('extract'); const noPi = document.getElementById('no_pi'); noPi.addEventListener('change', des, false); function des() { const limit = noPi.value; // Check that we haven't gone into // negative numbers if (limit >= 0) { // Create an array const html = []; // Loop, pushing HTML into the array, until // we've reached the limit set by the value in noPi for (let i = 0; i < limit; i++) { html.push('<input type="number" class="form-control"><div class="input-group-text">cm</div>'); } // `join` up the array, and add the HTML // string to the extract element extract.innerHTML = html.join(''); } }

 <input type="number" id="no_pi" /> <div id="extract"></div>

Información Adicional

• join

Hay varios errores:

• En tu bucle: i = va (es por eso que falla)
• Borra el contenido del div ext cada vez que itera, en lugar de agregar contenido
• Al escuchar el evento keyup , agrega algo de contenido en cada pulsación de tecla. Finalmente, si el usuario envía 12, generará 1 + 12 elementos. Debe pasar el valor usando un formulario (al hacer esto también puede agregar fácilmente el control de valor en el elemento de entrada).
• Como lo menciona perfectamente @Andy en los comentarios, innerHTML += es una muy mala idea. Debe generar sus elementos usando document.createElement o insertAdjacentHTML .

Algunos consejos :

• Use un detector de eventos en lugar del atributo onkeyup
• Evite este tipo de nombres de variables, sea más explícito
• Use const y let en lugar de var

Aquí hay una versión que soluciona todos esos problemas:

 document.getElementById('elementsNumberForm').addEventListener('submit', event => { event.preventDefault(); const targetElement = document.getElementById('extract'); const inputValue = document.getElementById('no_pi').value; for (let i = 0; i < inputValue; i++) { targetElement.insertAdjacentHTML('beforeEnd', '<input type="number" name="" class="form-control" /><div class="input-group-text">cm</div>'); } });

 <form id="elementsNumberForm"> <input type="number" id="no_pi" min="1" /> <input type="submit" /> </form> <div id="extract"></div>

Veo que desea usar un campo de entrada para insertar la cantidad de entradas para crear. Veo una mejor manera de comenzar a aprender insertar la cantidad de entradas con un mensaje y luego escalar el proyecto.

Puede comenzar así: (espero que tenga sentido para usted)

 <div style="height: 300px; background-color: #ccc;" class="container"></div>

tenemos este div que se va a llenar con las entradas

Luego tenemos el guión:

 const container = document.querySelector('.container'); const runTimes = prompt("How many inputs wnat to create?"); for(let i = 0; i < runTimes; i++){ let newInput = document.createElement('input'); newInput.innerHTML = "<input type='number' name='' class='form-control'>"; container.appendChild(newInput); }

En el ciclo for, creamos la entrada del elemento, luego con .innerHTML agregamos el HTML que queremos. para finalizar el ciclo, debemos agregar el elemento de entrada creado al div que tenemos.

Espero que tenga sentido para ti, :)

cuando tienes la idea con el aviso, he hecho este proyecto más pro jaja.

 <div style="height: 300px; background-color: #ccc;" class="container"></div> <input type="text" class="numberTimes" onkeyup="getValue()">

agregamos un detector de eventos a la entrada con la función getValuue, y el script es así:

 const container = document.querySelector('.container'); function getValue(){ let runTimes = document.querySelector('.numberTimes').value; document.querySelector('.numberTimes').value= ""; for(let i = 0; i < runTimes; i++){ let newInput = document.createElement('input'); newInput.innerHTML = "<input type='number' name='' class='form-control'>"; container.appendChild(newInput); } }

Esta línea document.querySelector('.numberTimes').value= ""; es restablecer el campo de entrada. Entonces, cada vez que inserta un valor en la entrada, crea esa cantidad de entradas en el contenedor y limpia el campo de entrada :)