Uncaught TypeError: Cannot read property 'length' of undefined

[R Naijat]

Hi everybody,
In the following piece of code, I create two elements: title and left.

var title = document.createElement("div");
title.id="titleDiv_" + creativeList[0].id;
title.style.marginTop="15px";	
			
var left = document.createElement("div");
left.id="left";			
left.innerHTML = "<input readonly type=\"text\" name=\"left\" size=3 maxlength=3 value=\"35\"><font>characters left</font>";

title.innerHTML = "TITLE:    <input maxlength=\"" + <c:out value="${titleMaxSize}"/> + "\" size=\"" + <c:out value="${titleMaxSize}"/> + "\" type=\"text\"  id=\"title_" + creativeList[0].id + "\" name=\"title\" value=\"" + creativeList[0].title + "\">";

umbrellaDiv.appendChild(title);			
umbrellaDiv.appendChild(left);

At this point, I check to see whether these nodes exist or not; they exist and are not null:

if(document.getElementById("titleDiv_" + creativeList[0].id) == null) {
		        alert("Title: null");
		    }else{
		    	alert("Title: not null");
		    }
			
			if(document.getElementById('left') == null) {
		        alert("Left node: null");
		    }else{
		    	alert("Left node: not null");
		    }

However, I receive this error as soon as the script comes to this line: Uncaught TypeError: Cannot read property 'length' of undefined
Looks like the value is not defined for them or its too early to check for the value property?

if(document.getElementById("titleDiv_" + creativeList[0].id).value.length == 0) {
		        alert("Title: nothing");
		    }else{
		    	alert("Title: found");
		    }
			
			if(document.getElementById('left').value.length == 0) {
		        alert("Left: nothing");
		    }else{
		    	alert("Left: found");
		    }

On the website, I see the fields with the "values" as follows; meaning it does show the values:

TITLE: Auto Body and Paint --> "Auto Body and Paint": is the value
35 characters left --> "35" is the value

[Bear Bibeault]

<div> elements do not have values.

[R Naijat]

Thanks so much. I modified the script to check the title.id and left.id instead of the id of the <div> element. The error is gone, and I don't receive any other error, however, I see the following when the alert() is executed:

Title: found: undefined
Left: found: undefined

Now my elements are found but I expected to see their values: "Auto Body and Paint" and "35". Why they are undefined?

  
left.innerHTML = "<input readonly id=\"left1\" type=\"text\" name=\"left\" size=3 maxlength=3 value=\"35\"><font>characters left</font>";  

title.innerHTML = "TITLE:    <input maxlength=\"" + <c:out value="${titleMaxSize}"/> + "\" size=\"" + <c:out value="${titleMaxSize}"/> + "\" type=\"text\"  id=\"title_" + creativeList[0].id + "\" name=\"title\" value=\"" + creativeList[0].title + "\">";
                                                                                                                                          
		    if(document.getElementById("title_" + creativeList[0].id).value.length == 0) {
		        alert("Title: nothing");
		    }else{
		    	alert("Title: found: " + ("title_" + creativeList[0].id).value);
		    }
			
			if(document.getElementById('left1').value.length == 0) {
		        alert("Left: nothing");
		    }else{
		    	alert("Left: found: " + ('left1').value);
		    }	

[R Naijat]

If I go to the Chrome JavaScript debugger, this is what I have:

<div id="creative_1860">
	<div id="titleDiv_124086790" style="margin-top: 15px; ">TITLE:    <input maxlength="35" size="35" type="text" id="title_124086790" name="title" value="Auto Body and Paint">
	</div>
	<div id="left"><input readonly="" type="text" name="left" size="3" maxlength="3" value="35"><font>characters left</font>
	</div>
</div>

I think first I need to refer to the input objects that I have - the following objects or elements - and then get the value from the object:

<input maxlength="35" size="35" type="text" id="title_124086790" name="title" value="Auto Body and Paint">
<input readonly="" type="text" name="left" size="3" maxlength="3" value="35"><font>characters left</font>

If my assumption is correct, I have difficulty referring to those objects within the code. I need to find out how can I refer to these two elements, b/c need to pass these elements to other function which then the function tries to access the values: "Auto Body and Paint" and "35".

[Bear Bibeault]

Your problem is not in accessing the elements but in the assumption that they have a value property. I've already told you: <div> elements do not have values.

If you're look for the contents, that'll be via the innerHTML property.

Get yourself a good JavaScript reference so you can see what the actual properties on the elements are rather than guessing.

[R Naijat]

Thanks, I figured that out.