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.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Oct 2010
    Location
    Toronto
    Posts
    95
    Thanks
    52
    Thanked 0 Times in 0 Posts

    changing the background color from the external js.js

    I want to create a basic script where someone clicks the button and the document color is changing. while I can do it with inline even handlers and also using the script block in html document, i am not able to achieve the result using the external js.js. My goal is not to use any even handlers at all inside the html document. This is how my codes looks like:


    <head>
    <title> Basics Exercise</title>
    <script type="text/javascript" src="js.js"></script>
    </head>
    <body>
    <form>
    <p> Click this button and the document's color will change again </p>
    <input name="button" type="button" value="Change the background color of the document"/>
    </form>



    js.js has

    function changecolor() {
    document.bgColor='#ea0d17';
    }

    document.forms[0].button.onClick=changecolor();



    I don't want anyone to write a script for me, but I would appreciate if someone told me why the script I wrote is not working.

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    I don't use the xhtml standard much myself, but I recall someone on this site mentioning that using the name attribute in xhtml has been deprecated, so perhaps if you referenced your targets by ID instead of name that would work?

  • #3
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    name attributes are deprecated for forms(!) in xhtml. Normal form fields may and should still have names :-)

    But: it is onclick and not onClick (case sensitive!) and it's changecolor and not changecolor()
    Code:
    document.forms[0].button.onclick=changecolor;

  • #4
    New Coder
    Join Date
    Oct 2010
    Location
    Toronto
    Posts
    95
    Thanks
    52
    Thanked 0 Times in 0 Posts
    Thank very much for your responses. js is not an easy language to learn. Please help. My code still not working.

    Devnull69-I changed the code as per your advice. but when I click the button -nothing happens.
    DanInMa-referencing the button by Id -did not produce any result either.

    the code looks like this:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title> Basics Exercise</title>
    <script type="text/javascript" src="js.js"></script>
    </head>
    <body>
    <form>

    <input name="button" type="button" value="Change the background color of the document"/>
    </form>
    </body>
    </html>




    js file


    function changecolor() {
    document.bgColor='#ea0d17';
    }

    document.forms[0].button.onclick=changecolor;

  • #5
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    You changed the bgColor attribute for the document. What you wanted to do is: Change the CSS style background-color for the body element
    Code:
    function changecolor() {
       document.body.style.backgroundColor = '#ea0d17';
    }

  • #6
    New Coder
    Join Date
    Oct 2010
    Location
    Toronto
    Posts
    95
    Thanks
    52
    Thanked 0 Times in 0 Posts
    i have inserted the code into html document . still no result. Error console tool tell me that document.forms[0] is underfined for some reason

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title> Basics Exercise</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <script type="text/javascript">
    function changecolor() {
    document.body.style.backgroundColor = '#ea0d17';
    }
    document.forms[0].button.onclick=changecolor;
    </script>
    </head>
    <body>
    <form action="">
    <input name="button" type="button" value="Change the background color of the document"/>
    </form>
    </body>
    </html>

  • #7
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    Yes, because it doesn't exist yet. HTML will be processed top-down (including Javascript) and Javascript will immediately be executed. By that time the form doesn't exist yet, because its HTML code has not yet been processed.

    Solution: Wait until page has been loaded
    Code:
    window.onload = function() {
       document.forms[0].button.onclick = changecolor;
    };

  • Users who have thanked devnull69 for this post:

    chickentulip (08-10-2011)

  • #8
    New Coder
    Join Date
    Oct 2010
    Location
    Toronto
    Posts
    95
    Thanks
    52
    Thanked 0 Times in 0 Posts
    Thank you!. I learned something new today


  •  

    Posting Permissions

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