Estoy terminando un proyecto escolar pero me encontré con un problema. Tengo la sensación de que es algo realmente simple que se me olvidó. Pero necesito agregar 4 preguntas y respuestas frecuentes. Pero en este momento está agregando 4 secciones separadas en lugar de 1 sección con las 4 preguntas y respuestas frecuentes.

archivo de índice

 import Component from "../components/Component.js"; import QuestionComponent from "../components/QuestionComponent.js"; window.addEventListener("load", (e) => { let index = new IndexController(); index.init(); }); class IndexController { init() { let questions = [{ question: 'vraag1', answer: 'antwoord1' }, { question: 'vraag2', answer: 'antwoord2' }, { question: 'vraag3', answer: 'antwoord3' }, { question: 'vraag4', answer: 'antwoord4' } ]; for (let i = 0; i < questions.length; i++) { const q = questions[i]; const question = this.rootElement; this.qComponent = new QuestionComponent(q.question, q.answer); // Voeg vervolgens de qComponent toe aan de section document.querySelector('main"]').append(this.qComponent.getView()); } } }

Solo se trata de la última línea porque probablemente solo necesito algo más en lugar de un documento.

Archivo de componente

 import Component from "./Component.js" export default class QuestionComponent extends Component { constructor(question, answer) { super("section"); this.rootElement.id = "faq"; this.rootElement.classList.add("faqSection"); this.vraag = question; this.antwoord = answer; this.initView(this.vraag, this.antwoord); } initView() { this.rootElement.innerHTML = ` <h2>FAQ Component</h2> <div class="faqComponent"> <p class="firstQuestion question">${this.vraag}</p> <p class="firstAnswer">${this.antwoord}</p> </div>`; let el = this.querySelector('question'); el.addEventListener('click', (event) => { this.onClick(event) }); } onClick() { console.log("onClick functie wordt aangeroepen."); let answer = this.querySelector('firstAnswer'); answer.classList.toggle('hidden'); } }

Probablemente también podría haber algo mal con esto, así que pensé en incluirlo para que puedan entenderlo mejor, supongo.