0

Quiero que mi id sea ejemplo:

Empiece en 1 y ese sea el id, después sea 2 y así conforme se van creando los div en el ciclo for para tomar y así poder mostrar la información depende del id

function clicking(posicion){


    var da = (data)

    document.getElementById("SegundoD").innerHTML =" "
        for(var i =0 ; i<da[posicion].Palabras.length ;i++){
        document.getElementById("SegundoD").innerHTML +="<div class='color' onclick='mostrar()' >"+"<h3>"+ da[posicion].Palabras[i].palabra +": </h3>"+"</div>";
    document.getElementById("SegundoD").innerHTML +="<div class='color1' id = 'alo' >"+"<h3>"+ da[posicion].Palabras[i].texto +" </h3>"+"</div>";

    }
}
 function mostrar() {

    document.getElementById('alo').style.display = 'inline-block';

 }
2
  • exactamente en dónde quieres poner eso?
    – Sr1871
    Commented el 23 oct. 2018 a las 19:00
  • No hagas eso. No necesitas crear ids dinámicamente, en lugar de pasar el índice, pasa el mismo elemento HTML u obtenlo con this Commented el 23 oct. 2018 a las 20:30

2 respuestas 2

1

Hice un pequeño ejemplo donde vas creando divs con ids diferentes dentro de un loop como lo pides:

var btn = document.getElementById("crear");
btn.addEventListener("click", () => {

  var wrapperDivs = document.getElementById("divs-wrapper");
  var i = (document.getElementsByClassName("div").length === 0) ? 1 : document.getElementsByClassName("div").length + 1;
  var limite = i + 3;
  
  for(i; i<=limite; i++){
    let div = `<div id="${i}" class="div">Div con el ID ${i}</div>`;
    wrapperDivs.insertAdjacentHTML('beforeend', div );
  }

});
#divs-wrapper{
  padding:5px;
}

.div{
  border:1px solid red;
  padding:5px;
}
<button id="crear">Crear DIV</button>
<div id="divs-wrapper"></div>

Espero te sirva.

2
  • El OP tiene dos divs dentro de su for, creo que le vendría bien cambiar tu ejemplo para asignar ids a dos divs.
    – javrd
    Commented el 23 oct. 2018 a las 19:07
  • Muchas gracias. Commented el 25 oct. 2018 a las 13:56
0

Podrías usar el indice i y un prefijo para cada uno de los dos div que creas en cada iteración. Por ejemplo:

function clicking(posicion) {


  var da = (data)

  document.getElementById("SegundoD").innerHTML = " "
  for (var i = 0; i < da[posicion].Palabras.length; i++) {
    document.getElementById("SegundoD").innerHTML += "<div class='color' id = 'prefijo-"+i+"' onclick='mostrar()' >" + "<h3>" + da[posicion].Palabras[i].palabra + ": </h3>" + "</div>";
    document.getElementById("SegundoD").innerHTML += "<div class='color1' id = 'alo-"+i+"'>" + "<h3>" + da[posicion].Palabras[i].texto + " </h3>" + "</div>";

  }
}

Ten en cuenta que antes al segundo div de cada iteración le estabas poniendo el id "alo". El identificador debería ser único. La función mostrar ya no te valdría.

1

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.