Jump to content

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]
Link to comment
https://forums.phpfreaks.com/topic/16109-problem-with-setattribute-i-think-and-ie/
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]
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
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

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.