Numbering a javascript list in a textarea

JavaScript
1

I’ve already taken one college course in javascript, but I’m trying to increase my knowledge of javascript by working through the book “Sams Teach Yourself Javascript in 24 Hours”. Everything is going well, but there is one exercise that I can’t figure out. We are supposed to adjust the code (see below) so that the names are output to the textbox in a numbered list. This comes in a chapter before loops and decisions are covered, so I assume we are to do it without using them.

Could you please take a quick look, and help me find out what I am missing here … if it is something simple or obvious, I am going to go hide my face in shame :blush: Thank you

// initialize the counter and the array
var numnames = 0;
var names = new Array();

function SortNames()
{
	// get the name from the text field
	thename = document.theform.newname.value;
	// convert the names to uppercase
	thename = thename.toUpperCase();
	// add the name to the array
	names[numnames] = thename;
	// increment the counter
	numnames++;
	// sort the array
	names.sort();
	document.theform.sorted.value = names.join("\
");
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<title>Learn Javascript in 24 Hours</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script type = "text/javascript" src = "Hour5Example2.js"></script>
				
	</head>
	
	<body>
		<div id = "wrapper">	
			<h1>Sorting String Arrays</h1>
			<p>
				Enter two or more names in the field below, and the sorted list of names will
				appear in the text area.
			</p>
			<form name = "theform">
				Name:
				<input type = "text" name = "newname" size = "20" />
				<input type = "button" name = "addname" value = "Add" onClick = "SortNames();" />
				<br />
				<h2>Sorted Names</h2>
				<textarea cols = "60" rows = "10" name = "sorted" >The sorted names will appear here.</textarea>
			</form>
		</div>	<!-- end of wrapper div -->
	</body>
	
</html>
2

I would suggest the last option, using parseInt, as that’s making use of more of what you’ve learned from Hour 5, which is more-than-likely the reason for Exercise 2.

3

Thanks so much. I tried variants of the first two but probably didn’t get the syntax right. I’ll try these. It wasn’t difficult to add a number to a name but to end up with an alphabetically sorted, numbered list, with a different name on each line, defeated me. I’ll have a go with these suggestions tonight.

4

You have my sympathy. I spent hours on this exercise, and couldn’t get it to work. Almost made me give up …

5

For reference, the whole book is online at freeopenbook.com The particular part in question is [url=“http://www.freeopenbook.com/javascript24/ch05lev1sec14.html”]Hour 5 Exercise 2

As the book hasn’t covered loops yet by this point, and the book is intended to be followed through hour by hour, you should use techniques that have been learned from that hour. As the book says in the intro

Exercises offer ways for you to gain more experience with the techniques the hour covers.

With Chapter 5, the second exercise would be a good time to make use of the string concatenation that was learned throughout that chapter.

Using either David’s example


names[numnames] = ++number + ". " + thename;

or one of my own suggestions here:


// initialize the counter, index, and the array
var numnames = 0;
var counter = 0;
var names = new Array();

// ... some code skipped

// increase the counter
counter = numnames + 1;
// add the name to the array
names[numnames] = index + '. ' + thename;

or without index, but using parseInt from the Converting Between Data Types section of [url=“http://www.freeopenbook.com/javascript24/ch05.html”]Hour 5.


// add the name to the array
names[numnames] = parseInt(numnames + 1) + '. ' + thename;
6

The solution isn’t in one of the appendixes? Odd.

7

Thanks. I’ll use loops, then. It’s not a quiz question, but an exercise question at the end of a chapter. And they didn’t provided answers in the book or online (I’ve checked the book’s website, and the publisher’s website.)

8

Thanks for taking a look at the code. I thought of that, but doesn’t it then sort after it has added the number to the beginning of the string? So the names will no longer be in alphabetical order?

9

Well, then I’m not sure, but who says it has to stay sorted?

And besides, if you know a good way (Loops) then why would you try to find a more difficult way? Either don’t sort, or don’t use join.

BTW, if this is a quiz question in the book, doesn’t it have a solution?

10

If I understand correctly, then just do this:


// initialize the counter and the array
var numnames = 0;
var names = new Array();
var number = 0;

function SortNames()
{
	// get the name from the text field
	thename = document.theform.newname.value;
	// convert the names to uppercase
	thename = thename.toUpperCase();
	// add the name to the array
	names[numnames] = ++number + ". " + thename;
	// increment the counter
	numnames++;
	// sort the array
	names.sort();
	document.theform.sorted.value = names.join("\
");
}