Jump to content

Archived

This topic is now archived and is closed to further replies.

dwees

Problem with setAttribute (I think?) and IE

Recommended Posts

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.

[code]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<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.setAttribute('id',divIdName);
newdiv.setAttribute('class','fenster');
  newdiv.innerHTML = '<a href="#" onclick="removeElement('+divIdName+')" style="text-decoration: none">[x]</a>\n';
  ni.appendChild(newdiv);

var childdiv = document.createElement('div');
divIdNameBtn = 'fenMaxBtn'+num;
childdiv.setAttribute('id',divIdNameBtn);
childdiv.setAttribute('class','fenMaxBtn');
childdiv.setAttribute('title','Click to Maximize/Restore')
childdiv.innerHTML = "&nbsp;\n";
document.getElementById(divIdName).appendChild(childdiv);

childdiv = document.createElement('div');
divIdNameBar = 'fenBar'+num;
childdiv.setAttribute('id',divIdNameBar);
childdiv.setAttribute('class','fenBar');
childdiv.setAttribute('title','Drag to Move')
childdiv.innerHTML = "Long Text\n";
document.getElementById(divIdName).appendChild(childdiv);

childdiv = document.createElement('div');
childdiv.setAttribute('class','fenContent');
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";
document.getElementById(divIdName).appendChild(childdiv);

childdiv = document.createElement('div');
divIdNameRes = 'fenResBtn'+num;
childdiv.setAttribute('id',divIdNameRes);
childdiv.setAttribute('class','fenResBtn');
childdiv.setAttribute('title','Drag to Resize')
childdiv.innerHTML = "&nbsp;";
document.getElementById(divIdName).appendChild(childdiv);
}
function removeElement(divNum) {
  var d = document.getElementById('myDiv');
  d.removeChild(divNum);
}
//-->
</script>

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

</body>
</html>
[/code]

Share this post


Link to post
Share on other sites
you don't need to use setAttribute, just assign the values to the object properties directery
[code]
childdiv.id = divIdNameBtn;
childdiv.className = 'fenMaxBtn';
childdiv.title = 'Click to Maximize/Restore';
[/code]

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

Share this post


Link to post
Share on other sites
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.

Dave

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.