Jump to content
Please Use CODE Tags

HELP! How to make a unordered List from user Input.

Sergio45
By Sergio45
in Programming
 Share
Go to solution Solved by Mr_KoKa,

You need to createElement (and then appendChild it to ul) for every li. Was not meant it to be a table?

Posted (edited)

Just want to thank you ahead of time for helping me out. 

 

The issue that I am running into is creating a un-ordered list with 3 numbers that the user inputs. 

**THIS IS MY ASSIGNMENT** 

Please don't give me the answer right away I just need some guidance.

 

I have a HTML file and Java Script File.

I am trying to create  the table from the javascript file. 

I have assigned the numbers and prompted the user to enter their numbers.

 

I have been using FireFox With FireBug to run the files.

I am using Notepad++ and cloud9 for my IDE.

 

Thanks again! 

<!DOCTYPE html>
<html>

<head>	
	<meta charset="UTF-8">
	<meta name="author" content="Enter your name here">
	
	<title>Web Programming - Unit 8</title>
	
  <script type="text/javascript" src="javascript/basics.js">

	
	</script>
</head>

<body>
	<h1 id="title"></h1>	
</body>

</html>
var $ = function(id) {return document.getElementById(id); }//end $

window.onload = function () {

	//Provide answer for Question 1 here
	document.getElementById("#title")
	{
		document.write("JavaScript Control Structures Test Document.");
	}
	//////////////////////
	
	testQuestion2();
	testQuestion3();
	
}


function testQuestion2() 
{
		var firstNumber;
		var secondNumber;
		var thirdNumber;
		var number1;
		var number2;
		var number3;
		
		firstNumber = prompt("Enter First Number");
		
		secondNumber= prompt("Enter Second Number");
		
		thirdNumber= prompt("Enter Third Number");
		
		
	
		number1= parseInt(firstNumber);
		number2= parseInt(secondNumber);
		number3= parseInt(thirdNumber);
	
	//console.log("first"+" "+firstNumber+" "+"Second"+" "+secondNumber+" "+"Third"+" "+thirdNumber);
	


}//end testQuestion2


function testQuestion3() {

}//end testQuestion3

 

index.zip

Edited by Sergio45
Link to comment
Share on other sites
Link to post
Share on other sites
Posted

Use document.createElement and appendChild to build table.

 

Example on build user list with list item: 

var ul = document.createElement('ul');
var li = document.createElement('li');

li.innerText = 'Test';

ul.appendChild(li);
document.body.appendChild(ul);

Result: 

<body>
  <ul>
    <li>Test</li>
  </ul>
</body>

 

Also this is not doing anything special: 

document.getElementById("#title") // Get's element by id and returns it, but you don't assign it anywhere
{ //This block has no effect on anything.
  document.write("JavaScript Control Structures Test Document."); // It just adds text at the end of document.
}

//If you want change text of #title element do
document.getElementById("#title").innerText = "JavaScript Control Structures Test Document.";

 

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
21 minutes ago, Mr_KoKa said:

var ul = document.createElement('ul'); var li = document.createElement('li'); li.innerText = 'Test'; ul.appendChild(li); document.body.appendChild(ul); 


		var ul = document.createElement('ul');
		var li = document.createElement('li');
		
		li.innerHTML = number1;
		
		
		li.innerHTML = number2;
		
		li.innerHTML = number3;
		
		ul.appendChild(li);
		
		
		document.body.appendChild(ul);

I tried it and it is getting me to where I want to be. Thanks again Mr_KoKa.

BUT
I tried changing and making another var for li to let the number1, 2, and 3 show in the list. But it just replaces the the last entered number. 

so does that mean that i need to create an array to store the numbers? or can I add new items without overwriting my last input?

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
3 minutes ago, Mr_KoKa said:

You need to createElement (and then appendChild it to ul) for every li. Was not meant it to be a table?

THANKS AGAIN Mr_KoKa!!!

I will the solution.

  

var $ = function(id) {return document.getElementById(id); }//end $

window.onload = function () {

	//Provide answer for Question 1 here
	document.getElementById("title").innerHTML = " <h1> JavaScript Control Structures Test Document.</h1>";
	
	//////////////////////
	
	testQuestion2();
	testQuestion3();
	
}


function testQuestion2() 
{
		var firstNumber;
		var secondNumber;
		var thirdNumber;
		var number1;
		var number2;
		var number3;
		
		firstNumber = prompt("Enter First Number");
		
		secondNumber= prompt("Enter Second Number");
		
		thirdNumber= prompt("Enter Third Number");
		
		
	
		number1= parseInt(firstNumber);
		number2= parseInt(secondNumber);
		number3= parseInt(thirdNumber);
	
	//console.log("first"+" "+firstNumber+" "+"Second"+" "+secondNumber+" "+"Third"+" "+thirdNumber);
	

	
	
		var ul = document.createElement('ul');
		var li1 = document.createElement('li');
		var li2 = document.createElement('li');
		var li3 = document.createElement('li');
		
		li1.innerHTML = number1;
		li2.innerHTML = number2;
		li3.innerHTML = number3;
		debugger;
		
		
		
		ul.appendChild(li1);
		ul.appendChild(li2);
		ul.appendChild(li3);
		
		
		document.body.appendChild(ul);
	
	
	
	
	


}//end testQuestion2


function testQuestion3() {

}//end testQuestion3

 

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

@Sergio45 You really need to start using arrays and loops, You have repeated yourself a number of times which goes against DRY.

  

<html>
<head>
<script>
var $ = function(id) {return document.getElementById(id); }//end $
window.onload = function () {

	//Provide answer for Question 1 here
	document.getElementById("title").innerHTML = " <h1> JavaScript Control Structures Test Document.</h1>";
	
	//////////////////////
	
	testQuestion2();
	testQuestion3();
	
}


function testQuestion2() 
{
		//empty array to store our numbers
		var number =[]
		//loop 3 times to get 3 numbers
		for(i=0; i<3; i++)
		{
			var num = parseInt(prompt("enter "+(i+1)+"number"))
			//store each input in the array
			number[i] = num;
		}
		//start of list
		var ul = document.createElement('ul');
		//loop every item in array
		for (i=0;i<number.length; i++)
		{
			var li = document.createElement('li');
			//adds current array item to the page
			li.innerHTML = number[i];
			ul.appendChild(li)
		}
		//end of list
		document.body.appendChild(ul);
}//end testQuestion2


function testQuestion3() {

}//end testQuestion3
</script>
</head>
<body>
<div id='title'>
</div>
</body>
</html>

as you can see by using an array to store the user input and a for loop you can reduce your code by a fair amount.  The only problem is that first loop which if a user inputs a letter then will cause the script to put NaN on the list.

 

Though this is likely outside the scope of your assignment but it is worth thinking about if you plan to take your coding to more advanced levels.

 

 

                     ¸„»°'´¸„»°'´ Vorticalbox `'°«„¸`'°«„¸
`'°«„¸¸„»°'´¸„»°'´`'°«„¸Scientia Potentia est  ¸„»°'´`'°«„¸`'°«„¸¸„»°'´

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author

How would we change this to make it loop through one number? 

lets say a user enters (n) and the loop goes 1 through (n) and displays it on the list. 

Not part of the assignment just looking at some old C# programs and seeing how I can translate it over to javascript.

11 hours ago, vorticalbox said:

@Sergio45 You really need to start using arrays and loops, You have repeated yourself a number of times which goes against DRY.

  


<html>
<head>
<script>
var $ = function(id) {return document.getElementById(id); }//end $
window.onload = function () {

	//Provide answer for Question 1 here
	document.getElementById("title").innerHTML = " <h1> JavaScript Control Structures Test Document.</h1>";
	
	//////////////////////
	
	testQuestion2();
	testQuestion3();
	
}


function testQuestion2() 
{
		//empty array to store our numbers
		var number =[]
		//loop 3 times to get 3 numbers
		for(i=0; i<3; i++)
		{
			var num = parseInt(prompt("enter "+(i+1)+"number"))
			//store each input in the array
			number[i] = num;
		}
		//start of list
		var ul = document.createElement('ul');
		//loop every item in array
		for (i=0;i<number.length; i++)
		{
			var li = document.createElement('li');
			//adds current array item to the page
			li.innerHTML = number[i];
			ul.appendChild(li)
		}
		//end of list
		document.body.appendChild(ul);
}//end testQuestion2


function testQuestion3() {

}//end testQuestion3
</script>
</head>
<body>
<div id='title'>
</div>
</body>
</html>

as you can see by using an array to store the user input and a for loop you can reduce your code by a fair amount.  The only problem is that first loop which if a user inputs a letter then will cause the script to put NaN on the list.

 

Though this is likely outside the scope of your assignment but it is worth thinking about if you plan to take your coding to more advanced levels.

 

 

 

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
30 minutes ago, Sergio45 said:

How would we change this to make it loop through one number? 

lets say a user enters (n) and the loop goes 1 through (n) and displays it on the list. 

Not part of the assignment just looking at some old C# programs and seeing how I can translate it over to javascript.

 

change the first for loop for i<1; you can change the 3 to the number of inputs you require.

                     ¸„»°'´¸„»°'´ Vorticalbox `'°«„¸`'°«„¸
`'°«„¸¸„»°'´¸„»°'´`'°«„¸Scientia Potentia est  ¸„»°'´`'°«„¸`'°«„¸¸„»°'´

Link to comment
Share on other sites
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programming

×