I need help with simple simple <ul></ul> issue

I need help with simple simple <ul></ul> issue
0

#1

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


#2

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?)


#3

Did you check this link https://codepen.io/alcatel1962/pen/OOxqLM? I am trying to dynamically create it with javascript


#4

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);

#5

Welcome to the forum!

I’ve edited your post for readability. When you enter a code block into the forum, remember to precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.


#6

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


#7

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.


#8

I made 2 for loops and now it seems to work.