/    Sign up×
Community /Pin to ProfileBookmark

can’t figure out why script won’t work (total newb)

Hello all,

I’m only a few lessons into learning JavaScript, which is probably why I can’t figure out what I’m doing wrong here…

I pasted the following code into my html page:

[COLOR=red]in the <head>:[/COLOR]

<script type=”text/javascript” language=”javascript” src=”sort.js”>
</script>

[COLOR=red]in the <body>:[/COLOR]

<form name=”theform”>
Name:
<input type=”text” name=”newmame” size=”40″ />
<input type=”button” name=”addname” value=”Add” onlick=”SortNames();” />
<br />
<h3>Sorted Names</h3>
<textarea cols=”60″ rows=”10″ name=”sorted”>
The sorted names will appear here.
</textarea>
</form>

[COLOR=red]in a separate file named sort.js:[/COLOR]

// 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;
// Add the names to the array
names[numnames]=thename;
// Increment the counter
numnames++;
// Sort the array
names.sort();
document.theform.sorted.value=names.join(“n”);
}

[COLOR=red]What’s supposed to happen:[/COLOR]
When you input two or more names, then click ‘Add’, the names are supposed to be sorted alphabetically in the textarea below.

[SIZE=4][COLOR=red]My Problem:[/COLOR][/SIZE]

I open this page in my browser (IE7 and Firefox), and when I click the “Add” button, nothing happens. This script is straight out of a JavaScript teaching book, so I am extremely confident that the script works, I just think that because I am a complete newb, I am missing something simple (and perhaps obvious to one of you.)

If it matters – I have not uploaded this HTML page to the web. I am opening the file from my own computer.

to post a comment
JavaScript

6 Comments(s)

Copy linkTweet thisAlerts:
@Declan1991Jun 24.2008 — A few typos:

<input type="text" name="new[color=red]n[/color]ame" size="40" />

<input type="button" name="addname" value="Add" on[color=red]c[/color]lick="SortNames();" />

and I'd suggest the following changes to the script.<i>
</i>var names = [];
function SortNames() {
names[names.length]=document.theform.newname.value;
names.sort();
document.theform.sorted.value=names.join("n");
}
Copy linkTweet thisAlerts:
@socalcaneauthorJun 24.2008 — Thanks Declan!

I can't believe I mistyped "newmame", but the 'c' in onclick actually was in my code (not sure how it got left out here.)

After making the corrections, I am still left with a (big) problem. The script still doesn't do what it's supposed to do, which is sort the names alphabetically. This holds true for both the example I am using, as well as the solution Declan recommended.

Any idea why?
Copy linkTweet thisAlerts:
@SpaceManSpiffJun 24.2008 — <i>
</i>&lt;html&gt;
&lt;head&gt;

&lt;script type="text/javascript" language="javascript"&gt;
var names = [];
function SortNames() {
names[names.length]=document.theform.newname.value;
names.sort();
document.theform.sorted.value=names.join("n");
}
&lt;/script&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;form name="theform"&gt;
Name:
&lt;input type="text" name="newname" size="40" /&gt;
&lt;input type="button" name="addname" value="Add" onclick="SortNames();" /&gt;
&lt;br /&gt;
&lt;h3&gt;Sorted Names&lt;/h3&gt;
&lt;textarea cols="60" rows="10" name="sorted"&gt;
The sorted names will appear here.
&lt;/textarea&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;


This works.
Copy linkTweet thisAlerts:
@socalcaneauthorJun 24.2008 — OK, I'm so confused ?

I trust that you guys know what you're doing, but for some reason the script still doesn't work for me. I am supposed to be able to input several names in any order, then when they are sorted they will appear in alphabetical order below. However, when I enter in a few names, the script spits them right back to me in the same order I specified.

Am I missing something simple here? Will the script not work unless the page is online? I'm using css with the page too - will that keep my script from working properly (for instance, do i have to list this script before or after the <style> element in the head? Does it matter?)
Copy linkTweet thisAlerts:
@SpaceManSpiffJun 24.2008 — If it's spitting out the names in your text box then the script is working fine, whats not working fine apparently is the order. Are you using the same exact function that deval told you to? His function works perfectly for me.
Copy linkTweet thisAlerts:
@socalcaneauthorJun 24.2008 — Spaceman, thanks for clarifying - it does seem to be a problem with the ordering of the names that are outputted.

I believe I copied everything properly, but the order problem persists. Below is my simple HTML page with CSS removed. This is the exact HTML page I am having trouble with, where the names dont output in order:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/URL]">

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

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Sorting String Arrays</title>

<script type="text/javascript" language="javascript">

var names = [];

function SortNames() {

names[names.length]=document.theform.newname.value;

names.sort();

document.theform.sorted.value=names.join("n");

}

</script>

</head>

<body>

<h2>Sorting String Arrays</h2>

<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="40" />

<input type="button" name="addname" value="Add" onclick="SortNames();" />

<br />

<h3>Sorted Names</h3>

<textarea cols="60" rows="10" name="sorted">

The sorted names will appear here.

</textarea>

</form>

</body>

</html>
×

Success!

Help @socalcane spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...