0

Estoy creando un pequeño programa que me cree unos divs y cuando me cree un nuevo div se me incremente un contador, para hacer tener un id unico en cada uno, el problema es que solo se me incrementa una sola vez luego y los nuevos que creo se me quedan con el mismo id.

Esté es mi JavaScript:

function duplicate(){
    var i = 0;
    i++
    let campos = document.createElement('div');
    campos.id = 'id' + i ;
    document.getElementById('duplicados').appendChild(campos);
}

Por si sirve de algo este es mi html:

Este es el boton con el que activo la función

<center><input type="button" id="add" onclick="duplicate()" value="Añadir"></center>

Y los nuevos div los inserto en un div llamado "duplicados"

3
  • 3
    Tienes que declarar la variable i fuera de la función Commented el 7 may. 2022 a las 23:03
  • 3
    La variable i tiene ámbito local, y se inicializa con 0 cada vez que invocas a la función, acto seguido la incrementas, por lo que en cada llamada, su valor termina siendo 1. campos.id termina siendo "id1" todas las veces. Usa una clase con una variable miembro estática o declara e inicializa por aparte de la función i, y solo la incrementas en la definción
    – DEVX75
    Commented el 7 may. 2022 a las 23:06
  • 1
    Si quieres usa una variable global o sea, como propiedad de windos, por ejemplo windows.dups y ahí guardas el último id. O en la función cuentas el número de divs dentro de duplicados (si duplicados solo contiene los divs que añades con el script)
    – Juan
    Commented el 7 may. 2022 a las 23:13

1 respuesta 1

1

Juan Manuel, una forma de resolverlo tal y como lo tienes tú sería utilizando clases (siempre vienen bien para esto y otras cosas como estilos, etc.). Te propongo algo así:

function duplicate(){
    let i=document.getElementsByClassName('elemento-repetido').length || 0,
        destino = document.getElementById('duplicados'),
        nuevo = document.createElement('div');
    i++;
    nuevo.id = 'id' + i ;
    nuevo.classList.add('elemento-repetido');

    destino.appendChild(nuevo);
}

Tu Respuesta

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

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