I encountered a problem of making a for loop after a document.getElementsByClassName(“..”)
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');
})
})
}
}
It will be returning like the image
I don’t understand why btnTitle.length return 0, but it still has btnTitle in console, and it has one element who owns a length: 1. I did it because I want to debug why the button’s function is not working
And this is how I create the buttons by javascript (if it’s necessary to debug):
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 = "<p>No courses found.</p>";
return;
}
//Make div for each course
data.courses.forEach(course => {
let course_nb = 0
const course_container = document.createElement("div");
course_container.innerHTML += `<button class="btn btn-primary button-title"><h3>Course ${course_nb += 1}: ${course.course.title}</h3></button>`
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 += `<h4>${lecture.title}</h4>`
//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 += `
<tr>
<th scope="col">Number</th>
<th scope="col">Quiz</th>
<th scope="col">Score</th>
</tr>
`
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 = "<p>Error loading courses.</p>";
});
}
