niche Posted September 4, 2011 Share Posted September 4, 2011 how do I get the css and the html into the function? <html><head><script type="text/javascript">function myFunction(){return ("Hello world!");}</script></head><body><div style="float:right;"><script type="text/javascript">document.write(myFunction())</script></div></body></html> Link to comment Share on other sites More sharing options...
Ingolme Posted September 4, 2011 Share Posted September 4, 2011 Why exactly would you do that? Link to comment Share on other sites More sharing options...
niche Posted September 4, 2011 Author Share Posted September 4, 2011 Ingolme thanks for your help. I'm sure I can use your help. This topic has merged with CreateElement() and getAttribute() in this forum. Link to comment Share on other sites More sharing options...
Drycodez Posted September 5, 2011 Share Posted September 5, 2011 function creatediv(){var nwdiv=document.createElement('div');nwdiv.style.float='right'nwdiv.id='mydiv';var txt='hello world!';document.body.apendChild(nwdiv);document.getElementById(mydiv).innerHTML=txt;} i think that will answer the question! Link to comment Share on other sites More sharing options...
niche Posted September 5, 2011 Author Share Posted September 5, 2011 Thanks for your help and I need a little more of it please. I put your function in this script and I couldn't get it to work. What do I need to change? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="en"><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="generator" content="PSPad editor, www.pspad.com"><title>Untitled</title><head><script type="text/javascript">function creatediv(){var nwdiv=document.createElement('div');nwdiv.style.float='right'nwdiv.id='mydiv';var txt='hello world!';document.body.apendChild(nwdiv);document.getElementById(mydiv).innerHTML=txt;}</script><style type="text/css"></style></head><body><form><input type="button" value="Click me!" onclick="creatediv()" /></form></body></html> Link to comment Share on other sites More sharing options...
Drycodez Posted September 5, 2011 Share Posted September 5, 2011 Sorry, there was a typo in the code i posted. Just add another 'p' to 'apend.' EX:document.body.appendChild(nwdiv) Link to comment Share on other sites More sharing options...
niche Posted September 5, 2011 Author Share Posted September 5, 2011 Sorry, still no hello world. Any other ideas? Link to comment Share on other sites More sharing options...
Drycodez Posted September 5, 2011 Share Posted September 5, 2011 Sorry, still no hello world. Any other ideas?hmmmm! Ok, juxt put this nwdiv.innerHTML='hello worl!' and remove document.getElementById('nwdiv').innerHTML='hello world' Link to comment Share on other sites More sharing options...
niche Posted September 5, 2011 Author Share Posted September 5, 2011 No hello world yet. function now reads as function creatediv(){var nwdiv=document.createElement('div');nwdiv.style.float='right';nwdiv.id='mydiv';nwdiv.innerHTML='hello world!';document.body.appendChild(nwdiv);} : Link to comment Share on other sites More sharing options...
Drycodez Posted September 5, 2011 Share Posted September 5, 2011 You can also use the previous method, if only you put quotaion marks in the getElementByID method:document.getElementById( " nwdiv " ) Am using a mobile phone right now and that why its difficult for me to spot erorrs/typos. Link to comment Share on other sites More sharing options...
Drycodez Posted September 5, 2011 Share Posted September 5, 2011 No hello world yet. function now reads asfunction creatediv(){var nwdiv=document.createElement('div');nwdiv.style.float='right';nwdiv.id='mydiv';nwdiv.innerHTML='hello world!';document.body.appendChild(nwdiv);} : That should work! Link to comment Share on other sites More sharing options...
niche Posted September 5, 2011 Author Share Posted September 5, 2011 Success! Except, no float right. Any ideas? Link to comment Share on other sites More sharing options...
Drycodez Posted September 5, 2011 Share Posted September 5, 2011 TRY: nwdiv.style.cssfloat='right' Link to comment Share on other sites More sharing options...
niche Posted September 5, 2011 Author Share Posted September 5, 2011 How about: nwdiv.setAttribute("style","float:right;background-color:red"); How would I use the alert to display the html/css, from the function, in a popup? I've heard it can be done, but haven't found instructions yet. Link to comment Share on other sites More sharing options...
Drycodez Posted September 5, 2011 Share Posted September 5, 2011 How about:nwdiv.setAttribute("style","float:right;background-color:red"); it is possible that way, but i dont know if its supported by all major browsers. Link to comment Share on other sites More sharing options...
niche Posted September 5, 2011 Author Share Posted September 5, 2011 Point! I didn't know that and I didn't consider that possibility. I tried "nwdiv.style.cssfloat='right';" without success. What do you think? Link to comment Share on other sites More sharing options...
Drycodez Posted September 5, 2011 Share Posted September 5, 2011 Point! I didn't know that and I didn't consider that possibility. I tried "nwdiv.style.cssfloat='right';" without success. What do you think?it works! Link to comment Share on other sites More sharing options...
niche Posted September 5, 2011 Author Share Posted September 5, 2011 You're absolutely right. I shouldn't look a gift-horse in the mouth.anyway, now i'm making sure I understand the function and I'm OK until I get to: document.body.appendChild();I can't find the documentation that actually says appendChild() is a method of the property body and body is a property of the document object.Am I thinking about this correctly? Link to comment Share on other sites More sharing options...
Don E Posted September 5, 2011 Share Posted September 5, 2011 From my understanding, but I'm not entirely sure... when writing css via javascript, like this:nwdiv.style.float='right';.. the value 'right' in this case should be in double quotes: "right";Another example: nwdiv.style.backgoundColor = "blue"; So perhaps that's maybe why the float didn't work for you. You're absolutely right. I shouldn't look a gift-horse in the mouth.anyway, now i'm making sure I understand the function and I'm OK until I get to: document.body.appendChild();I can't find the documentation that actually says appendChild() is a method of the property body and body is a property of the document object.Am I thinking about this correctly? Link to comment Share on other sites More sharing options...
niche Posted September 5, 2011 Author Share Posted September 5, 2011 Thanks for your suggestion, but that didn't work. Can you provide any insight to my last post (post #18)? Link to comment Share on other sites More sharing options...
Don E Posted September 5, 2011 Share Posted September 5, 2011 It looks like you had some errors in spelling. For example mwdiv and mydiv, you got them mixed up abit. If you look at what I wrote below and then look at your original code, you'll see what I mean. Also, I added a red background so you can see the changes when the div is created on the page, Also, I added a height of 100px. You can remove it if you wish. <!DOCTYPE HTML><html lang="en"><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="generator" content="PSPad editor, www.pspad.com"><title>Untitled</title><head><script type="text/javascript">function creatediv(){ var nwdiv = document.createElement('div'); nwdiv.style.float = "right"; nwdiv.style.backgroundColor = "red"; nwdiv.style.height = 100 + "px"; nwdiv.id = "mydiv"; var txt = "hello world!"; document.body.appendChild(nwdiv); document.getElementById('mydiv').innerHTML = txt;}</script><style type="text/css"></style></head><body><form><input type="button" value="Click me!" onclick="creatediv()" /></form><script type="text/javascript></script></body></html> Thanks for your suggestion, but that didn't work. Can you provide any insight to my last post (post #18)? Link to comment Share on other sites More sharing options...
niche Posted September 5, 2011 Author Share Posted September 5, 2011 Thanks Don E. Now i'd like to focus on what O. Samuel's function is doing. I'm learning JS and just need to be absolutely certain that I know how this function works (I'm using this function purely as a learning tool). Specifically, I haven't found the documentation that's explicit about how "body" gets justified for inclusion in "document.body.appendChild(nwdiv);".Working backwards, I found appendChild() in both the html dom & xml dom (I think it's from the html dom, but won't bet the house on that). Anyway, there must be a straight-forward definition of what "document.body" stands for, I'd just like to know exactly where the reference is that spells it out? Someone has to have something like that that's on a page or two. Is there a link for something like that? Link to comment Share on other sites More sharing options...
Don E Posted September 5, 2011 Share Posted September 5, 2011 If I understand correctly what you're asking, you want to know what exactly document.body stands for? If so, here's a snippet from w3schools:"Each HTML document loaded into a browser window becomes a Document object.The Document object provides access to all HTML elements in a page, from within a script."So since the document object provides access to all HTML elements in a page, that also goes for the <body> element. As you already know, the body is what makes the webpage; everything in the body is what we see. So when you append children to the body, you have to use document.body because it's like saying "do you want to append this child?" "Yes", "Okay, where?" "To that document" "Okay, and where in that document?" "The body within that document."The document object, is actually part of the window object. So we could write this instead: window.document.body but from my understanding, we don't have to because js already knows what you're doing when you just do: document.body instead. The window object refers basically to the browser. So you basically go from window(browser) -> document(the current document inside that particular window(browser) -> body(the body element inside the document), etc.I hope that gives you some clarification. Thanks Don E. Now i'd like to focus on what O. Samuel's function is doing. I'm learning JS and just need to be absolutely certain that I know how this function works (I'm using this function purely as a learning tool). Specifically, I haven't found the documentation that's explicit about how "body" gets justified for inclusion in "document.body.appendChild(nwdiv);".Working backwards, I found appendChild() in both the html dom & xml dom (I think it's from the html dom, but won't bet the house on that). Anyway, there must be a straight-forward definition of what "document.body" stands for, I'd just like to know exactly where the reference is that spells it out? Someone has to have something like that that's on a page or two. Is there a link for something like that? Link to comment Share on other sites More sharing options...
Drycodez Posted September 5, 2011 Share Posted September 5, 2011 'body,' is an html document property. Link to comment Share on other sites More sharing options...
niche Posted September 5, 2011 Author Share Posted September 5, 2011 Thanks again Don E and O. Samuel. What's the difference between the document object and the document property? If they're the same, why list one as a stand alone object and the other a a property of an object? Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.