By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,605 Members | 2,147 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,605 IT Pros & Developers. It's quick & easy.

New To Dom Scripting, having some issues

Expert 100+
P: 192
The script I'm trying to write has no real world use, I'm just practicing on working with nodes etc.... The html markup is simple, just a div and a button, when you click the button, a text node is appended to the div, and the button is removed, a new button is added. the new button has setAttribute("onclick","remove()") which removes the text node written to the screen with the previous button click. This works as expected in Firefox, while IE will add the new text node, create the new button, but the remove() function is not run when the button is clicked. Viewing the current DOM does show the onclick=remover() however. The main html markup and javascipt is below:

Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript" language="javascript">
  2. function main(){
  3. var main      = document.getElementById("main");
  4. var bld        = document.createElement("h1");
  5. bld.setAttribute("id","bigText");
  7. bld.appendChild(document.createTextNode("Greg is Great"));
  8. main.appendChild(bld);
  10. var input    = document.getElementById("mybutton");
  11. input.parentNode.removeChild(input);
  13. var newbutton= document.createElement("input");
  14. newbutton.setAttribute("type","button");
  15. newbutton.setAttribute("value","Remove Text");
  16. newbutton.setAttribute("onclick","remove()");
  17. newbutton.setAttribute("id","mybutton");
  19. main.appendChild(newbutton);
  20. }
  22. function remove(){
  23. var bigText = document.getElementById("bigText");
  24. bigText.parentNode.removeChild(bigText);
  26. var input    = document.getElementById("mybutton");
  27. input.parentNode.removeChild(input);
  29. var newbutton2= document.createElement("input");
  30. newbutton2.setAttribute("type","button");
  31. newbutton2.setAttribute("value","Click Me");
  32. newbutton2.setAttribute("onclick","main()");
  33. newbutton2.setAttribute("id","mybutton");
  35. var main = document.getElementById("main");
  36. main.appendChild(newbutton2);
  38. }
  39. </script>
  40. <title></title>
  41. </head>
  42. <body>
  43.      <div id='main'></div>
  44. <input id='mybutton' type='button' onClick='main()' value="Click Me"/>
  45. <a onClick="'','objWin','width=600,height=450,scrollbars=yes,resizable=yes');objDoc=objWin.document;'text/plain');objDoc.write(document.documentElement.outerHTML);objDoc.close();">View current DOM</a>
  46. </body>
  47. </html>
The HREF in the html above is just used to view the current state of the dom. It helps a newbie like me. After reading a bit on this board I've realized that there are probably easier ways of doing things, but Im just trying to get my head around "Traversing the DOM". Thanks for any help anyone can give me.

Sep 2 '06 #1
Share this Question
Share on Google+
1 Reply

Expert Mod 15k+
P: 16,027
You can't use setAttribute to set onclick in IE. Try this instead:
Expand|Select|Wrap|Line Numbers
  1. newbutton.onclick=remove;
Nov 5 '07 #2

Post your reply

Sign in to post your reply or Sign up for a free account.