In the event listener, I need to ensure that my list items within the forEach loop are not displaying on separate lines. This issue is causing a problem in a lengthy section of code.
The goal is to update questions when an answer is clicked from a list. Both the questions and answers are stored in an array of objects for a coding quiz.
These list items are dynamically generated within the script, as shown below.
function presentQuestions() {
interval = setInterval(function () {
timeCounter++;
timeEl.textContent = timeCounter;
}, 1000)
askNow.innerHTML = " ";
ansList.innerHTML = " ";
for (var i = 0; i < questions.length; i++){
var displayQuestion = questions[changeQuestion].title;
var displayListQues = questions[changeQuestion].choices;
askNow.innerHTML = displayQuestion;
}
displayListQues.forEach(function (domanda) {
// setId++;
var li = document.createElement('li');
li.setAttribute('id', setId++);
li.textContent += domanda;
ansList.append(li);
li.addEventListener('click', function (e) {
e.preventDefault();
askNow.innerHTML = " ";
ansList.innerHTML = " ";
changeQuestion++;
displayQuestion = questions[changeQuestion].title;
displayListQues = questions[changeQuestion].choices;
displayListQues.forEach(function (ques) {
li.textContent += ques + "\n"; // Attempting to display them on separate lines similar to this li.textContent += domanda but it's not working.
})
askNow.textContent = displayQuestion;
ansList.append(li)
})
})
}