Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Wanet Telecoms Ltd on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

createElement("div") in IE 1

Status
Not open for further replies.
hc98br

hc98br

ISP
Aug 14, 2003
46
I'm having problems with the included bit of code (sorry its so long, but I wanted to be clear). The code lets you create a list by clicking the button, each click adds another item and selects it, clicking an item selects it.

Works great in Netscape, but fails in IE, whilst each list item is created OK, you cannnot reference it, so I get the error 'document.getElementById(...).style' is not an object. when creating.

Surley I'm just missing somthing small, any help is greatly appricated.


Thanks

Ben.

Code: 
<HTML>

<INPUT TYPE="BUTTON" VALUE=" + " onClick="add();">

<DIV ID="list">
<DIV ID="row0" onClick="selectrow(0);">Item 0</DIV>
</DIV>

<SCRIPT>

function add() {
	mainDivElement = document.getElementById("list");
	
	count++;
	
	newNote = document.createElement("div");
	newNote.setAttribute("ID", "row" + count);
	newNote.setAttribute("onClick", "selectrow(" + count + ");");
	
	noteText = document.createTextNode("Item "+count);
	newNote.appendChild(noteText);
	
	mainDivElement.appendChild(newNote);
	
	selectrow(count)
}

function selectrow(row) {
	eval('document.getElementById("row' + currentSelected + '").style.backgroundColor = "";');
	eval('document.getElementById("row' + row + '").style.backgroundColor = "#99DDFF";');
	
	currentSelected = row;
}
	
var count = 0
var currentSelected = 0
selectrow(0)

</SCRIPT>

</BODY></HTML>
 
Sort by date Sort by votes
Try this for size:

Code: 
<html>
<head>
	<script type="text/javascript">
	<!--
		var count = 0
		var currentSelected = 0

		function add() {
			mainDivElement = document.getElementById('list');
			count++;

			newNote = document.createElement('div');
			newNote.setAttribute('id', 'row' + count);
			newNote.setAttribute('onclick', 'selectrow(' + count + ');');

			noteText = document.createTextNode('Item ' + count);
			newNote.appendChild(noteText);
			mainDivElement.appendChild(newNote);

			selectrow(count)
		}

		function selectrow(row) {
			document.getElementById('row' + currentSelected).style.backgroundColor = '';
			document.getElementById('row' + row).style.backgroundColor = '#99DDFF';
			currentSelected = row;
		}
	//-->
	</script>
</head>

<body onload="selectrow(0);">
	<input type="button" value=" + " onclick="add();">
	<div id="list">
		<div id="row0" onclick="selectrow(0);">item 0</div>
	</div>
</body>
</html>

Apart from the small re-jig of the script to the head section, the main changes were the removal of the eval statements - they just weren't needed.

Anyway - it seems to work for me in IE, NN, Mozilla, and Opera now.

Hope this helps,
Dan
 
Upvote 0 Downvote
Thanks for that, just had time to look at it.

I can't believe that IE is so fussy about where code goes, normal Netsacpe that does like 'creative' code.

Anyway, I loaded it up and whilst the new row is created without error, the onclick does not seem to work on any of the new rows!, any ideas?
 
Upvote 0 Downvote
If you replace this line:

Code: 
newNote.setAttribute('onclick', 'selectrow(' + count + ');');

with this line:

Code: 
newNote.onclick = new Function('selectrow(' + count + ');');

Then all works as expected.

Hope this helps,
Dan
 
Upvote 0 Downvote
Thanks for that - big help.

Just for anybody else, I still had problems translating it back to my original, more complex code. Looks like one of the main problems was the line:
Code: 
newNote.setAttribute("ID", "row" + count);

It was not created correctly simply because the text ID was in uppercase, works fine in lowercase!!!


Thanks

Ben
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

AbidingDude
  • Locked
  • Question
Where Does The &quot;name&quot; Attribute Stand?
Replies
1
Views
416
gmmastros
gmmastros
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
984
xwb
xwb
JScannell
  • Locked
  • Question
Programmatically inserting a newline in a &lt;textarea&gt;, &lt;span&gt;, or &lt;div&gt;
Replies
5
Views
2K
ggriffit
ggriffit
tonynsx
  • Locked
  • Question
document.getElementById(&quot;main&quot;).innerHTML not working
Replies
1
Views
293
ggriffit
ggriffit
waubain
  • Locked
  • Question
First image in slide gallery not showing - Uncaught TypeError: slides[(slideIndex - 1)] is undefined 1
Replies
2
Views
603
waubain
waubain

Part and Inventory Search

Sponsor

Back
Top