Tengo un <div> en mi HTML:
<div id="attempt_history"></div> En mi JavaScript tengo un código para crear dinámicamente nuevos elementos (un <button> y un <pre> ) y agregar a <div> :
for(let i = 0; i < resultAtpmtList.length; i++) { var attmptHistoryBut = document.createElement('button'); attmptHistoryBut.id = 'attmptHistoryBut' + i; attmptHistoryBut.className = 'attmptHistoryBut_C'; attempt_history.appendChild(attmptHistoryBut); if (resultAtpmtList[i][1] == 0) { var success_output = "Failed Attempt"; document.getElementById('attmptHistoryBut' + i).style.background = "white"; document.getElementById('attmptHistoryBut' + i).style.width = "100%"; document.getElementById('attmptHistoryBut' + i).style.textAlign = "left"; document.getElementById('attmptHistoryBut' + i).style.color = "red"; } else { var success_output = "Successful Attempt"; document.getElementById('attmptHistoryBut' + i).style.background = "white"; document.getElementById('attmptHistoryBut' + i).style.width = "100%"; document.getElementById('attmptHistoryBut' + i).style.textAlign = "left"; document.getElementById('attmptHistoryBut' + i).style.color = "green"; successful = 1; } var attmptHistoryPre = document.createElement('pre'); attmptHistoryPre.id = 'attmptHistoryPre' + i; attmptHistoryPre.className = 'attmptHistoryPre_C'; attempt_history.appendChild(attmptHistoryPre); document.getElementById('attmptHistoryBut' + i).style.fontSize = "20px"; document.getElementById('attmptHistoryBut' + i).innerHTML = "Attempt " + (i+1) + ": " + resultAtpmtList[i][2] + " " + success_output; document.getElementById('attmptHistoryPre' + i).innerHTML = resultAtpmtList[i][0]; } Luego, también tengo el siguiente código JS para hacer que el 'siguiente' <pre> sea plegable (mostrar/ocultar) cuando se hace clic en el elemento <button> anterior:
var coll = document.getElementsByClassName("attmptHistoryBut_C"); var i; for (i = 0; i < coll.length; i++) { coll[i].addEventListener("click", function() { this.classList.toggle("active"); var content = this.nextElementSibling; if (content.style.display === "block") { content.style.display = "none"; } else { content.style.display = "block"; } }); } Sin embargo, el <pre> no alterna al hacer clic en el botón. El comportamiento no funciona.
¿Qué he hecho mal?
if (content.style.display === "block") Esto solo capturará elementos con display:block; en su atributo style="..." (ya sea en el HTML original o agregado por JS). Prueba a invertir la lógica.
if (content.style.display === "none") { content.style.display = null; } else { content.style.display = "none"; }