/    Sign up×
Community /Pin to ProfileBookmark

Stumped! getElementById() doesn’t read last element in loop

OK, I ‘m stumped. ?

My form allows the user to add and remove rows from a list of ID numbers (not to be confused with the ID in “getElementByID()”) and corresponding test tube letters, i.e. “n” rows of two input fields. The server technology being used is ColdFusion, which you need to know for just a few lines of code below. The code to do add/delete rows works fine. But if I add a row, when I loop through these rows as part of my validation at save time (via Javascript), it loops through and validates all but the last row — even though it recognizes that the last row is there

Here’s the code:

//Find out how many tubes there are in this batch.

//dyn_table_samples is the tbody name for the table containing the rows
var containerElement = document.getElementById(“dyn_table_samples”);

//Subtract 1 to eliminate column heading row and set the rows variable
var numRows = containerElement.childNodes.length – 1;

//This part converts a ColdFusion list of valid ID numbers so it can be used
//in Javascript. This works fine.
<CFOUTPUT>
var #toScript(ValidIDList, “jsIDList”)#;
</CFOUTPUT>

for (i=1; i<=numRows; i++) {
//get the element’s name.

var whichElement = “IDNumber”+i;
alert(whichElement);
var IDField = document.getElementById(whichElement);
//alert the field name and value. This works OK for all but the last row
alert(“i = ” + i + “; IDField = ” + IDField.value);
//See if the field’s value is in the list
if (jsIDList.indexOf(IDField.value) == -1) {
alert(IDField.value + ” is not a valid ID Number.”);
return;
}
}

Everything is fine; the outputs that I’m testing via the alert statements are fine, until I get to the last row. For some reason, I get an error when it performs getElementById() on the last row. It creates the “whichElement” variable, but that’s as far as it gets. Why wouldn’t it see that last row?

Anyone know why?

to post a comment
JavaScript

4 Comments(s)

Copy linkTweet thisAlerts:
@said_foxFeb 06.2008 — I think in the for loop it should be as follow:

for (i = 0; i < numRows; i++){

.... and so one,

because you start from 1 and i<= so the last element may be not found. it is like calling the list item number 6 from a list having only 5 items!
Copy linkTweet thisAlerts:
@JMRKERFeb 06.2008 — I agree with 'said_fox' in that the array test should begin at '0' and not '1', ?

but I think the problem is here:
[code=php]
//Subtract 1 to eliminate column heading row and set the rows variable
var numRows = containerElement.childNodes.length - 1;
[/code]

I think is should be WITHOUT the -1 to check the last id in the array.

ie: var numRows = containerElement.childNodes.length;

Give it a try to see what the effects are. :eek:
Copy linkTweet thisAlerts:
@hackwriterauthorFeb 06.2008 — I don't think so....If I have 6 rows I need six iterations. So if it starts at 1, the last row will be 6. If I started at 0 (like you would with an array), then you would go one less. I did try what you suggested, however, and it skipped the last item.

The problem is definitely in getElementById(), though. In my save function (action page in ColdFusion), I handle the looping in ColdFusion this way:

<CFLOOP INDEX="i" FROM="1" TO="#url.numRows#" STEP="1">

<!--- get the field names for this row --->

<CFSET IDFieldVal = trim(evaluate("form.IDNumber" & #i#))>

<CFSET TubeVal = trim(evaluate("form.TubeLetter" & #i#))>

<!--- Insert what's on the screen --->
<CFQUERY NAME="InsertTubes" DATASOURCE="#dbname#" BLOCKFACTOR="1">
INSERT INTO TestTubes (ID, TubeLetter, userID, CreateDate, ChangeDate)
VALUES (#variables.IDFieldVal#, '#variables.TubeVal#', '#session.userid#', #variables.CreateDate#, #variables.CreateDate#)
</CFQUERY>

</CFLOOP>

-- still looping from row 1 through number of rows. And it saves everything just fine.
Copy linkTweet thisAlerts:
@hackwriterauthorFeb 06.2008 — I hate to be so difficult :rolleyes: but that's not it either. The code that builds the table also includes a row with column headings for ID and the letter assigned to the tube. That's why I subtract one.

If I alert/output the "numrows" variable as originally written, it has the correct number of rows. And it builds the name of the element properly. It's as if there's a problem when the element is created on the fly -- a problem that my Cold Fusion action page doesn't have -- the save works fine; it's just when I try to validate it using Javascript.
×

Success!

Help @hackwriter 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.17,
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,
)...