Jump to content


Problem with setAttribute (I think?) and IE

  • Please log in to reply
2 replies to this topic

#1 dwees

  • Members
  • PipPipPip
  • Advanced Member
  • 47 posts
  • LocationUnited Kingdom

Posted 31 July 2006 - 03:14 PM

So I've created some code (by examining someone else's code and reading 10 different explanations of the DOM in Javascript) that allows the user to click on some text, and produce a new div, including child divs.  Each div is separately named so there isn't any confusion, but share some classes in common to allow CSS to happen.

Works perfectly in Firefox, but IE 7 just creates the nodes, apparently without any attributes (or at least doesn't recognize the attributes and ignores the CSS).

Anyone help me sort this out?  I've included all of the HTML as well as a reference, but the CSS is irrelevant.  I've been reading something about IE not knowing the setAttribute object?

Go easy on me btw, this is my 3rd day coding Javascript.  I'm aware I could probably use some functions in the code below to streamline them a bit, but I thought I'd simplify the code once I got it working properly in both browsers.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<title>Page title</title>
<link rel="stylesheet" type="text/css" href="demo.css" />
<script language="JavaScript" type="text/javascript">
function addElement() {
  var ni = document.getElementById('myDiv');
  var numi = document.getElementById('theValue');
  var num = (document.getElementById('theValue').value -1)+ 2;
  numi.value = num;
  var newdiv = document.createElement('div');
  var divIdName = 'fen'+num;
  newdiv.innerHTML = '<a href="#" onclick="removeElement('+divIdName+')" style="text-decoration: none">[x]</a>\n';
	var childdiv = document.createElement('div');
	divIdNameBtn = 'fenMaxBtn'+num;
	childdiv.setAttribute('title','Click to Maximize/Restore')
	childdiv.innerHTML = "&nbsp;\n";
	childdiv = document.createElement('div');
	divIdNameBar = 'fenBar'+num;
	childdiv.setAttribute('title','Drag to Move')
	childdiv.innerHTML = "Long Text\n";

	childdiv = document.createElement('div');
	childdiv.innerHTML = "\n<p>You can focus me by clicking anywhere on me or on one of my child elements.<br />"; 
	childdiv.innerHTML += "\nYou can drag me by dragging on the bar at the top of this element.<br />";
	childdiv.innerHTML += "\nYou can resize me by dragging on the button in the lower right corner.</p>\n";
	childdiv = document.createElement('div');
	divIdNameRes = 'fenResBtn'+num;
	childdiv.setAttribute('title','Drag to Resize')
	childdiv.innerHTML = "&nbsp;";
function removeElement(divNum) {
  var d = document.getElementById('myDiv');

   <input type="hidden" value="0" id="theValue" />
   <p><a href="javascript:;" onclick="addElement();">Add Some Elements</a></p>
   <div id="myDiv"> </div>

#2 nogray

  • Members
  • PipPipPip
  • Advanced Member
  • 930 posts
  • LocationSan Francisco CA

Posted 31 July 2006 - 04:45 PM

you don't need to use setAttribute, just assign the values to the object properties directery
	childdiv.id = divIdNameBtn;
	childdiv.className = 'fenMaxBtn';
	childdiv.title = 'Click to Maximize/Restore';

and don't forget the ; after each line of code
childdiv.setAttribute('title','Click to Maximize/Restore')  <--- missing a ;


#3 dwees

  • Members
  • PipPipPip
  • Advanced Member
  • 47 posts
  • LocationUnited Kingdom

Posted 31 July 2006 - 06:20 PM

Thanks for your help.  I had posted this on another site, and they suggested the same thing, and it works beautifully.  I also double-checked my script for missing ; after you pointed this out, and should have those typos fixed.


0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users