0

Mediante un input, quería crear las capas que en este se indican, creando un for en una función, pero el bucle no se para y crea infinitos div. Lo siguiente es el código del input:

        <input type="number" id="numeroCapas"><button onclick="addCapaInput()">Añadir capas anteriores</button></br>

Aquí dejo el código de la función:

function addCapaInput(){
var x = document.getElementById("numeroCapas").value;
for (x in numeroCapas){
    var caja = document.createElement('div');
    document.getElementById('section').appendChild(caja);
}
4
  • ¿Cuál es el valor de numeroCapas? el 9 mar. 2021 a las 17:09
  • No entiendo la pregunta
    – gjgjgjgj14
    el 9 mar. 2021 a las 17:11
  • En tu for in tienes for(x in numeroCapas), donde numeroCapas debe ser una variable ¿qué valor contiene dicha variable? el 9 mar. 2021 a las 17:12
  • Yo quiero que en el input se introduzca un número, por ejemplo el 3. Tras eso que se impriman 3 cajas en pantalla
    – gjgjgjgj14
    el 9 mar. 2021 a las 17:13

1 respuesta 1

0

Recuerda la estructura de un for...in, este requiere de un objeto, por lo que si el "iterable" no es un objeto, el bucle nunca se va a parar

Documentación en MDN de for...in

En este caso, puedes usar un for "tradicional", haciendo uso de parseInt para poder convertir un string a un entero

IMPORTANTE: Strings no convertibles a enteros darán NaN

function addCapaInput() {
  if (isNaN(parseInt(numeroCapas.value))) {
    alert("Número no válido");
  } else {
    for(let i = 1; i <= parseInt(numeroCapas.value); i++) {
      const el = document.createElement("div");
      el.innerHTML = "Div "+i;
      section.appendChild(el);
    }
  }
}
<input type="number" id="numeroCapas"><button onclick="addCapaInput()">Añadir capas anteriores</button><br/>
<div id="section"></div>

Haremos uso de isNaN para comprobar que el string si sea convertible a un entero, si no es convertible enviaremos una alerta

Si lo es, procederemos a iniciar el bucle, contando desde 1 hasta el número introducido y poniendo nuevos <div> por cada número que recorra el bucle

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.