HTMLCollection не функционирует для петли [дублировать] ⇐ Javascript

[Anonymous]

Я столкнулся с проблемой создания цикла после документа. Getelementsbyclassname ("..") < /p>
document.addEventListener('DOMContentLoaded', function() {
let btnTitle = document.getElementsByClassName("button-title");
console.log("Number of button-title elements found:", btnTitle.length);
if (btnTitle) {
console.log("all button: ", btnTitle);
Array.from(btnTitle).forEach((btn) => {
console.log("btn", btn);
btn.addEventListener("click", (event) => {
const courseContent = btn.nextElementSibling;
console.log("courseContent:", courseContent)
courseContent.classList.toggle('show');
})
})
}
}

он будет возвращаться, как изображение
< /p>
Я не понимаю, почему btntitle.length return 0, но у него все еще есть Btntitle в консоли, и у него есть Один элемент, которому принадлежит длина: 1. Я сделал это, потому что хочу отладить, почему функция кнопки не работает < /p>
И именно так я создаю кнопки с помощью JavaScript (если это необходимо отладка): < /p>
const courseAndTest = document.getElementById("course_and_test");
if(courseAndTest) {
//Fetch data
const student_id = courseAndTest.dataset.studentId;
fetch(`/student_tests/${student_id}`)
.then(response => response.json())
.then(data => {
if (!data || !data.courses) {
courseAndTest.innerHTML = "
No courses found.
";
return;
}

//Make div for each course
data.courses.forEach(course => {
let course_nb = 0
const course_container = document.createElement("div");
course_container.innerHTML += `Course ${course_nb += 1}: ${course.course.title}`
const course_container_2 = document.createElement("div");
course_container_2.classList.add("toggle-course");
//Add all lectures of course
course.lectures.forEach(lecture => {
const lecture_container = document.createElement("div");
lecture_container.style.overflowX = "auto";
lecture_container.innerHTML += `

${lecture.title}

`

//create a table with the lecture test score
const lecture_table = document.createElement("table");
lecture_table.classList.add("lecture-table", "table", "table-hover");
//create header for the table
lecture_table.innerHTML += `

Number
Quiz
Score

`
lecture_container.appendChild(lecture_table);

//Add quize's cell
let i = 0
lecture.quizes.forEach(quiz => {
const tableRow = lecture_table.insertRow();
tableRow.insertCell().textContent = i+=1;
tableRow.insertCell().textContent = quiz.title;
tableRow.insertCell().textContent = quiz.score;
});
lecture_container.appendChild(lecture_table);
course_container_2.appendChild(lecture_container);
course_container.appendChild(course_container_2);
});
courseAndTest.appendChild(course_container);
});
})
.catch(error => {
console.error("Error fetching data:", error);
courseAndTest.innerHTML = "
Error loading courses.
";
});

}


Подробнее здесь: https://stackoverflow.com/questions/794 ... -for-loops