Hi, I’m new to this forum. Have started learning Javascript here and right now I’m playing around with a javascript quiz.
Has encountered an annoying problem that I can not solve with my code. I would like someone to explain why it does like this. The problem I have is that it creates the <ul>
list </ul>
inline horizontal. (*Urgna,*weirdo,Helsinki,Stockholm)
I am trying to create it vertically like this with javascript:
*Urgna
*weirdo
*Helsinki,
*Stockholm
Check my link https://codepen.io/alcatel1962/pen/OOxqLM
I would really appreciate an explanation to understand the problem I have
Best regards
Inside the ul tags, you need to enclose each list item in li tags, like this:
<ul>
<li>Urgna</li>
<li>weirdo</li>
</ul>
(How did you get the “<” and “>” to show in your text?)
Did you check this link https://codepen.io/alcatel1962/pen/OOxqLM? I am trying to dynamically create it with javascript
HTML code
<h1 id="h1"></h1>
<ul id="myList">
</ul>
Javascript code
var h1 = document.getElementById('h1');
var list = document.getElementById('myList');
for(var i = 0; i < questions[i].question[currentQuestionNumber].length; i++) {
//Create question list!
h1.innerHTML = questions[currentQuestionNumber].question;
var node = document.createElement('li');
var textnode = document.createTextNode(questions[currentQuestionNumber].choices);
node.appendChild(textnode);
list.appendChild(node);
Hey @alcatel1987,
it seems you are doing something wrong within your for loop. Please take notice that you are changing the inner text of the h1 element each time the for loop iterates. The creation and addition of elements inside the for loop is wrong.
I suggest you write some simple code first, to show that it works for one question and then refactor it for the whole quiz.
I made a simple example using your html, writing a simple js script to create li elements and it works.
https://codepen.io/TomerBenRachel/pen/NwwKPQ
Thanks, I will restart and try slowly forward again.
Yes the idea with H1 element is that later with nextbutton I will iterate new question. And I am controlling which question to show with currentQuestionNumber variable, also for choices. I am using an array with objects for questions,choices and correct answers.
I made 2 for loops and now it seems to work.