A first attempt Jscripting, changing the background colour with user input (via CSS)

Discussion in 'JavaScript' started by Ramacan260, Jul 17, 2011.

  1. #1
    Alright, so I may be a noob, but help is always appreciated :cool:

    I have only just started to learn javascript, shortly after HTML. I have no previous programming experiance, and it is all fresh to me. That's one of the main reasons I joined digital point today.

    I am also not quite sure on the age restrictions, but I am 13. That being said, I see no reason why I can't be part of this active community and start my programming journey!

    Well, here it goes, my first piece of presumably terrible code...

    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled 1</title>
    
    <style type="text/css">
    #box {
    	border-top: medium orange solid;
    	border-bottom: medium orange solid;
    	width:400px
    }
    
    </style>
    
    </head>
    
    <body style="background-attachment:">
    
    <script type="text/javascript">
    var back;
    back = window.document.body;
    
    function changeback() {
    your = document.getElementById(your).vaule;
    back = '<body style="background-color:' + your + '">';
    </script>
    
    <div id="box" style="width: 304px">
    
    <h3>Change the background colour!</h3>
    <br />
    <p><i>Type in a valid CSS colour and hit 'Change colour' to see an instant effect!</i></p>
    
    	<input name="Text1" type="text" value="Hello" id="your"/>
    	<input name="Button1" type="button" value="Change colour" onclick="changeback()" />
    </div>
    
    </body>
    
    Code (markup):
    This piece of code I wrote is probably riddled with errors, and it obviously doesn't work. But why? Could anyone please take the time to look at my Javascript and tell me what is wrong with it?

    I have bearly started the tutorials of my 1700 page 'Javascript Bible' book, and have just grasped the basics of programming
    [​IMG]

    Thankyou!
     
    Ramacan260, Jul 17, 2011 IP
  2. Jan Novak

    Jan Novak Peon

    Messages:
    121
    Likes Received:
    5
    Best Answers:
    1
    Trophy Points:
    0
    #2
    Hello Ramacan, welcome here.

    Here is a code which do it with comments. Try to compare it with your code.
    I also suggest to use Netbeans IDE www.netbeans.org/ which has intellisense for HTML, Javacript, CSS and many other languages. So you will have info about syntax mistakes immediatelly before you run your code in browser.
    I also recommend you to use Firebug in Firefox for debugging html, css, javascript etc.

    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled 1</title>
    
    <style type="text/css">
    #box {
    	border-top: medium orange solid;
    	border-bottom: medium orange solid;
    	width:400px
    }
    
    </style>
    
    </head>
    
    <body id="body">
    
    <script type="text/javascript">
    
        function changeback() {
            //this line will get value of the text input
            var color = document.getElementById("color").value;
            //this line will add reference to body into variable
            var body = document.getElementById("body");
            //and this line will set the element to the color which is readed from first line into variable color
            body.style.backgroundColor=color;
        }
        //this code call the function changeback() after loading the whole page. So after that will be page orange.
        window.onload=changeback;
    
    </script>
    
    <div id="box" style="width: 304px">
    
    <h3>Change the background colour!</h3>
    <br />
    <p><i>Type in a valid CSS colour and hit 'Change colour' to see an instant effect!</i></p>
    
            <input name="color" id="color" type="text" value="orange" />
            
    	<input name="Button1" type="button" value="Change colour" onclick="changeback()" />
    </div>
    
    </body>
    
    Code (markup):
     
    Jan Novak, Jul 17, 2011 IP
  3. Ramacan260

    Ramacan260 Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thanks Novak :)

    I certainly will read some of the tutorials, and Netbeans really looks great!
     
    Ramacan260, Jul 17, 2011 IP