Code not accessing nextElementSibling correctly

I have a <div> in my HTML:

<div id="attempt_history"></div>

In my JavaScript I have code to dynamically create new elements (a <button> and a <pre>)and add to the <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];
}

Then I also have the following JS code to make the ‘next’ <pre> collapsible (show/hide) when the preceding <button> element is clicked:

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";
    }
  });
}

However, the <pre> does not toggle on button click. The behaviour does not function.

What have I done wrong?

Answer

if (content.style.display === "block")

This will only catch elements with display:block; in their style="..." attribute (either on the original HTML or added by JS). Try reversing the logic

if (content.style.display === "none") {
  content.style.display = null;
} else {
  content.style.display = "none";
}

Advertisement

Answer