Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Apr 2006
    Location
    Logan, Utah, USA
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    getElementByID has no properties?

    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:
    Code:
    <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:
    Code:
    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);
    }

  • #2
    Regular Coder
    Join Date
    Mar 2006
    Location
    BrasŪlia, Brazil
    Posts
    153
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Don't know if it has something to do with your problem but i think you want this:

    Code:
    <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:

    Code:
    <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
    Last edited by Kakao; 04-04-2006 at 04:24 PM.

  • #3
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    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?
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #4
    New to the CF scene
    Join Date
    Apr 2006
    Location
    Logan, Utah, USA
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sure. And could you give me an example of how I would use alerts?

    Code:
    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.

  • #5
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    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
    Last edited by Kor; 04-04-2006 at 08:56 PM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #6
    New to the CF scene
    Join Date
    Apr 2006
    Location
    Logan, Utah, USA
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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'...

  • #7
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    Your problem is your HTML.
    Code:
    	<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
    Code:
    <element />
    is parsed exactly as if you had written
    Code:
    <element></element>
    while in HTML it is treated as if you had written
    Code:
    <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:
    Code:
    	<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:
    Code:
    	<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
    Code:
    <!--- 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 ">".
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #8
    New to the CF scene
    Join Date
    Apr 2006
    Location
    Logan, Utah, USA
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #9
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    Quote Originally Posted by TommiesGlasses
    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...
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #10
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    I knew you coud trust Macromedia to break XML compliance...
    I would have swored that you will say that 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.. Well, even if not, I think I can manage this...
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •