...

View Full Version : getElementByID has no properties?



TommiesGlasses
04-04-2006, 04:09 PM
I'm experiencing some trouble with getElementById(). When my script runs I receive an error that says that the element has no properties. Through my searching I have found that this is commonly because the element has not been loaded and I should move the script below the element. I have done this and still reach the same road block. Also, the script is triggered by a form, so the element should have already loaded, right? Anyways, here is the code.

HTML:

<html>
<head>
...
<div style="text-align:center;">
<form name="trans_type" id="trans_type">
<select name="text_type" onChange="javascript:importXML(this.value)" />
<option value="long_desc">App Type: Long Desc</option>
<option value="short_desc">App Type: Short Desc</option>
<option value="all">All Text</option>
</form>
</div>
<!--- FORM results go here. STM --->
<div id="writeList"></div>
</body>
</html>

And the script:

function importXML(fileName)
{
// checks browser and adjusts code according to IE or Firefox - calls createTable()
...
xmlDoc.onload = createTable(fileName);

// loads file
xmlDoc.load(fileName + ".xml");
}

function createTable(title)
{
// sets up the table and all it's properties

// sets up the header and title rows

// populates table with data from xml file


// appends tbody into table
newList.appendChild(nlBody);
document.getElementById('writeList').appendChild(newList);
}

Kakao
04-04-2006, 04:21 PM
Don't know if it has something to do with your problem but i think you want this:


<select name="text_type" onChange="javascript:importXML(
this.options[this.selectedIndex].value)" />
<option value="long_desc">App Type: Long Desc</option>
<option value="short_desc">App Type: Short Desc</option>
<option value="all">All Text</option>


In instead of this:


<select name="text_type" onChange="javascript:importXML(this.value)" />
<option value="long_desc">App Type: Long Desc</option>
<option value="short_desc">App Type: Short Desc</option>
<option value="all">All Text</option>


Programming Crash Course (http://programming-crash-course.com/)

Kor
04-04-2006, 04:48 PM
Nope, as long as the select is not multiple, the select's value is always the selected option's value. Well, you may write simply onchange="importXML(this.value)", but this woun't change the error.

The error must lay otherplace. may we see the whole function createTable(title) ?

have you tried to give alerts here and there to check where the code goes wrong?

TommiesGlasses
04-04-2006, 06:06 PM
Sure. And could you give me an example of how I would use alerts?


function createTable(title)
{
// sets up the table and all it's properties
var x = xmlDoc.getElementsByTagName('translist');
var newList = document.createElement('table');
newList.setAttribute('width','100%');
newList.setAttribute('cellPadding',2);
newList.setAttribute('cellspacing',0);
newList.setAttribute('border',1);

// sets up the header and title rows
var nlBody = document.createElement('tbody');
var hRow = document.createElement('tr');
hRow.setAttribute('style','background-color: #808080;');
nlBody.appendChild(hRow);

var hTitle = document.createElement('td');
var titleText = document.createTextNode(title.toUpperCase() + "TEXT TRANSLATIONS");
hTitle.setAttribute('style','font-weight: bold; color: white; text-align: center;');
hTitle.setAttribute('colspan',4);
hTitle.appendChild(titleText);

var hRow2 = document.createElement('tr');
hRow2.setAttribute('style','background-color: #808080;');
nlBody.appendChild(hRow2);
var hEng = document.createElement('td');
var hSpan = document.createElement('td');
var titleEng = document.createTextNode("ENGLISH");
var titleSpan = document.createTextNode("SPANISH");

hEng.setAttribute('style','font-weight: bold; color: white; text-align: center;');
hEng.setAttribute('colspan',2);
hSpan.setAttribute('style','font-weight: bold; color: white; text-align: center;');
hSpan.setAttribute('colspan',2);
hEng.appendChild(titleEng);
hSpan.appendChild(titleSpan);

var row = document.createElement('tr');

for (i=0;i<x.length;i++)
{
var row = document.createElement('tr');
for (j=0;j<x[i].childNodes.length;j++)
{
if (x[i].childNodes[j].nodeType != 1) continue;
var container = document.createElement('td');
var theData = document.createTextNode(x[i].childNodes[j].firstChild.nodeValue);
container.appendChild(theData);
row.appendChild(container);
}
nlBody.appendChild(row);
}

// appends tbody into table
newList.appendChild(nlBody);
document.getElementById('writeList').appendChild(newList);
}Thank you for helping me with this.

Kor
04-04-2006, 08:54 PM
At a first glance:

1. Well. setting style is not quite well implemented in present browsers whithin setAttribute() method. Use rather DOM 0

element.style.fontWeight='bold';
...
element.style.backgroundColor='#808080';
...
and so on...
But even better you can write a CSS class with all the desired attributes and simply set it:

element.className='myclass'

2. hSpan.setAttribute('colSpan','2')

Take care. Compounded attributes (css backgroundColor; HTML colSpan) should have Uppercased each of their first characters

TommiesGlasses
04-04-2006, 11:28 PM
Cool. Thanks. I will keep that in mind.

But, I'm failing to see how my code for formatting affects how the script is finding the element 'writeList'...

liorean
04-05-2006, 08:32 AM
Your problem is your HTML.
<div style="text-align:center;">
<form name="trans_type" id="trans_type">
<select name="text_type" onChange="javascript:importXML(this.value)" />
<option value="long_desc">App Type: Long Desc</option>
<option value="short_desc">App Type: Short Desc</option>
<option value="all">All Text</option>
</form>
</div>
<!--- FORM results go here. STM --->
<div id="writeList"></div>Now, one thing you must realise is that parsing is different between XML and HTML. In XML

<element /> is parsed exactly as if you had written
<element></element> while in HTML it is treated as if you had written
<element>. This is very important in your specific case, because your markup is broken in both XML and HTML.


Why is it broken? Well, in XML, your sourcecode will be treated like this:
<div style="text-align:center;">
<form name="trans_type" id="trans_type">
<select name="text_type" onChange="javascript:importXML(this.value)"></select>
<option value="long_desc">App Type: Long Desc</option>
<option value="short_desc">App Type: Short Desc</option>
<option value="all">All Text</option>
</form>
</div>
<!--- FORM results go here. STM --->
<div id="writeList"></div>

Now, you want those options to be inside the select element, not outside it. However, in HTML you have an entirely different problem. Here's how it will be treated in HTML:
<div style="text-align:center;">
<form name="trans_type" id="trans_type">
<select name="text_type" onChange="javascript:importXML(this.value)">
<option value="long_desc">App Type: Long Desc</option>
<option value="short_desc">App Type: Short Desc</option>
<option value="all">All Text</option>
</form>
</div>
<!--- FORM results go here. STM --->
<div id="writeList"></div>



The select element may only contain option elements, text nodes or comments. everything else will be ignored. Thus, by forgetting to close the select element, you've made the parser ignore everything after it.









There is another potential problem there, too. If you look at that comment you write
<!--- FORM results go here. STM ---> In XML, this is a well-formedness error. XML comments start with "<!--", end with "-->", and there may not be any occurence of "--" within the comment.


In HTML user agents, the behavior is unreliable. Still if you want it to work with guarantee, there are three simple rules for comments, same rules as XML enforce:
- They start with "<!" followed by exactly two dashes, "--". No more, no less.
- They should not contain "--". If they do contain "--" however, make sure the total number of occurences of "--" is evenly divisible by 2, and all of them are separated by at least one other character from any other occurence of "--".
- They end with exatcly two dashes, "--", no more, no less, directly followed by ">".

TommiesGlasses
04-05-2006, 08:03 PM
The detail of your answer was awesome! Thank you for showing me where I went wrong and explaining why. Your post was extremely helpful. Thank you for taking the time to give such a detailed explanation.

And, for the record, my commenting is such because the page is actually written using ColdFusion and the commenting for that language uses the three dashes at the beginning and end.

liorean
04-05-2006, 09:05 PM
The detail of your answer was awesome! Thank you for showing me where I went wrong and explaining why. Your post was extremely helpful. Thank you for taking the time to give such a detailed explanation.:) Didn't take much time to write either. It was mostly copy and paste and insert some colours into it...
And, for the record, my commenting is such because the page is actually written using ColdFusion and the commenting for that language uses the three dashes at the beginning and end.I knew you coud trust Macromedia to break XML compliance...

Kor
04-05-2006, 09:13 PM
I knew you coud trust Macromedia to break XML compliance...

I would have swored that you will say that :D But (except those funny javascript ready-made codes) DreamWeaver looks the best developing tool, so far. If you all of you know a better one, please, let me know it. Especially if it is freeware.. :D Well, even if not, I think I can manage this... :rolleyes:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum