Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 19
  1. #1
    New Coder
    Join Date
    Aug 2009
    Posts
    21
    Thanks
    6
    Thanked 0 Times in 0 Posts

    function won't work

    I'm new to JS and I can't get this function to display. Can you help me please?
    Code:
    <!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>

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    apendChild(nwdiv);

    should be

    appendChild(nwdiv);

  • Users who have thanked DanInMa for this post:

    niche (09-05-2011)

  • #3
    New Coder
    Join Date
    Aug 2009
    Posts
    21
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Thanks. Made the change and still no hello world. Any other ideas?

  • #4
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    Code:
    document.getElementById('mydiv')
    ... and get rid of the document.write() stuff

  • #5
    Regular Coder
    Join Date
    Aug 2010
    Posts
    966
    Thanks
    19
    Thanked 211 Times in 209 Posts
    Code:
    <!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;
    Last edited by DaveyErwin; 09-05-2011 at 04:26 PM.

  • Users who have thanked DaveyErwin for this post:

    niche (09-05-2011)

  • #6
    New Coder
    Join Date
    Aug 2009
    Posts
    21
    Thanks
    6
    Thanked 0 Times in 0 Posts
    still an obstacle illusion (no hello world). Here's the current funtion:
    Code:
    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');
    }

  • #7
    Regular Coder
    Join Date
    Aug 2010
    Posts
    966
    Thanks
    19
    Thanked 211 Times in 209 Posts
    Quote Originally Posted by niche View Post
    still an obstacle illusion (no hello world). Here's the current funtion:
    Code:
    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;

  • #8
    New Coder
    Join Date
    Aug 2009
    Posts
    21
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Success! Except, no float right. Any ideas?

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

  • #9
    Regular Coder
    Join Date
    Aug 2010
    Posts
    966
    Thanks
    19
    Thanked 211 Times in 209 Posts
    Code:
    <!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>

  • Users who have thanked DaveyErwin for this post:

    niche (09-05-2011)

  • #10
    New Coder
    Join Date
    Aug 2009
    Posts
    21
    Thanks
    6
    Thanked 0 Times in 0 Posts
    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?

  • #11
    Regular Coder
    Join Date
    Aug 2010
    Posts
    966
    Thanks
    19
    Thanked 211 Times in 209 Posts
    Code:
    <!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>

  • #12
    New Coder
    Join Date
    Aug 2009
    Posts
    21
    Thanks
    6
    Thanked 0 Times in 0 Posts
    No pop-up. What do you think?

  • #13
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    But you definitely see a user dialog showing you the HTML source of the page, don't you?

  • #14
    New Coder
    Join Date
    Aug 2009
    Posts
    21
    Thanks
    6
    Thanked 0 Times in 0 Posts
    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?

  • #15
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    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.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •