...

View Full Version : function won't work



niche
09-05-2011, 04:28 PM
I'm new to JS and I can't get this function to display. Can you help me please?
<!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;
document.write(txt);
}
</script>
<style type="text/css">
</style>
</head>
<body>
<form>
<input type="button" value="Click me!" onclick="creatediv()" />
</form>


</body>
</html>

DanInMa
09-05-2011, 04:41 PM
apendChild(nwdiv);

should be

appendChild(nwdiv);

niche
09-05-2011, 04:45 PM
Thanks. Made the change and still no hello world. Any other ideas?

devnull69
09-05-2011, 05:15 PM
document.getElementById('mydiv')


... and get rid of the document.write() stuff

DaveyErwin
09-05-2011, 05:23 PM
<!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.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>


</body>
</html>

document.body.apendChild(nwdiv);
document.getElementById(mydiv).innerHTML=txt;

document.body.appendChild(nwdiv);
document.getElementById('mydiv').innerHTML=txt;

niche
09-05-2011, 05:25 PM
still an obstacle illusion (no hello world). Here's the current funtion:
function creatediv(){
var nwdiv=document.createElement('div');
nwdiv.style.float='right';
nwdiv.id='mydiv';
var txt='hello world!';
document.body.appendChild(nwdiv);
document.getElementById('mydiv');
}

DaveyErwin
09-05-2011, 05:28 PM
still an obstacle illusion (no hello world). Here's the current funtion:
function creatediv(){
var nwdiv=document.createElement('div');
nwdiv.style.float='right';
nwdiv.id='mydiv';
var txt='hello world!';
document.body.appendChild(nwdiv);
document.getElementById('mydiv');
}

document.getElementById('mydiv').innerHTML = txt;

niche
09-05-2011, 05:35 PM
Success! Except, no float right. Any ideas?

Also, deleting "document.getElementById('mydiv').innerHTML = txt;" produced same result. I don't know why. do you?

DaveyErwin
09-05-2011, 05:42 PM
<!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.setAttribute("style","float:right;")
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>


</body>
</html>

niche
09-05-2011, 05:52 PM
Cool. Like I said, I'm new to JS. I understand there's a way to display the html/css in a pop-up. I thought the alert would've done that, but obviously it was displayed in the flow. How would I use the alert to display the html/css in a popup?

DaveyErwin
09-05-2011, 06:04 PM
<!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.setAttribute("style","float:right;")
nwdiv.id='mydiv';
var txt='hello world!';
document.body.appendChild(nwdiv);
document.getElementById('mydiv').innerHTML=txt;
alert(document.body.innerHTML)
}

</script>
<style type="text/css">
</style>
</head>
<body>
<form>
<input type="button" value="Click me!" onclick="creatediv()" />
</form>


</body>
</html>

niche
09-05-2011, 06:13 PM
No pop-up. What do you think?

devnull69
09-05-2011, 06:23 PM
But you definitely see a user dialog showing you the HTML source of the page, don't you?

niche
09-05-2011, 06:50 PM
Got it now! Thank-you very much.

Now i'm making sure I understand the function and I'm OK util 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?

devnull69
09-05-2011, 07:38 PM
document.body is actually a "short cut" to document.getElementsByTagName('body')[0] and exposes this DOM element to Javascript. appendChild() is a method for each DOM element and appends the element given as a parameter to the element the method is applied to.

niche
09-05-2011, 08:23 PM
So, the line assembles the html/css ( but not the innerHTML() ). Right?

I've frequently thought something like that, but have never seen a reference, on a single page (or two), that exposed the DOM the way you just did.

Such a reference must exist, but I haven't bee able to find it? Do you know where one is?

niche
09-05-2011, 09:57 PM
I'm still reading. 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?

devnull69
09-05-2011, 11:09 PM
I don't know what you mean ... document object/document property? If you are talking about the actual DOM element called "document" it's twofold: Generally every property can be an object itself and thus expose more properties/methods

Example


// the window object has a property document
var theDoc = window.document;
// theDoc is an object itself, exposing more properties and methods
var theBody = theDoc.body;
theDoc.addEventListener('DOMContentLoaded', whatever, false);

niche
09-06-2011, 12:31 AM
Thanks devnull69 I think I understand. I can always start new new topic if I have more questions. I think this topic has been worked as completely as possible.

I need to thank DaveyErwin and DanInMa for their help.

Thanks again to all of you.

Niche



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum