Accepting user input |
Accepting user input |
slantt |
Nov 16 2011, 11:39 AM
Post
#1
|
Newbie Group: Members Posts: 18 Joined: 16-November 11 Member No.: 15,867 |
Newbie here - about 5 hours experience with html...
I'm experimenting with putting up a local weather reporting page - and mostly doing research on how things get done in html and javascript. I starting experimenting with BG colors for my page and thought it would be handy to be able to change BG colors via an input tag and use of a var. I can't get the thing to work. Below are my javascript and html lines for what I'm attempting to do. Am I on a completely wrong track here? Any words of wisdom greatly appreciated... Jim <body> <script type="text/javascript"> <!-- --> function ChangeBackground() { var clr document.body.style.backgroundColor="clr"; } </script> </body> <form> Color Change: <input type="text" name="clr" size="20"/> </form> <input type="button" onclick="ChangeBackground('clr')" value="Change background color" /> |
Darin McGrew |
Nov 16 2011, 11:53 AM
Post
#2
|
WDG Member Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
This is about JavaScript, not markup, so I moved it to the appropriate forum.
|
Christian J |
Nov 16 2011, 03:18 PM
Post
#3
|
. Group: WDG Moderators Posts: 9,661 Joined: 10-August 06 Member No.: 7 |
CODE <!-- --> This above is not needed these days (it was used long time ago to hide javascript from ancient browsers, in which case the script should be inside the comment). CODE <form> Color Change: <input type="text" name="clr" size="20"/> </form> You don't actually need the FORM element just for javascript. You can use it to retrieve its form fields though, but then the FORM element needs a NAME attribute: http://www.javascriptkit.com/javatutors/form3.shtml CODE function ChangeBackground() { var clr You need to get the value of the element with the specified NAME (see previous link). Or you can use the document.getElementById() method to get the value of the element with that ID attribute value instead: http://www.w3schools.com/jsref/met_doc_getelementbyid.asp |
slantt |
Nov 16 2011, 03:50 PM
Post
#4
|
Newbie Group: Members Posts: 18 Joined: 16-November 11 Member No.: 15,867 |
Thanks for the advice, guys;
The <!-- --> was just a line spacer for my weak eyes... I'll take a look at the two links you sent along. Jim This post has been edited by slantt: Nov 16 2011, 03:54 PM |
pandy |
Nov 16 2011, 05:13 PM
Post
#5
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,733 Joined: 9-August 06 Member No.: 6 |
You need to use JavaScript comments for that, not HTML ones. As you had it it should cause an error.
The old school hide from old browser thing Christian talked about is written like this. CODE <script type="text/javascript"> <!-- // JS code goes here //--> </script> JS recognizes that for what it is (or something). But you had a full HTML comment before the actual script began. That is an error. CODE // Single line comment /* Multi line comment */ |
Brian Chandler |
Nov 17 2011, 04:18 AM
Post
#6
|
Jocular coder Group: Members Posts: 2,460 Joined: 31-August 06 Member No.: 43 |
You need to use JavaScript comments for that, not HTML ones. As you had it it should cause an error. Well, section 20.3.1 of the Flanagan Javascript book, which is pretty definitive, says that Javascript treats an html opening comment <!-- as a single line comment. So the <!-- --> line will be ignored by javascript and will not cause an error (in Javascript). //------------------------------------------------------------------------------ Of course, I think a javascript comment would look neater //------------------------------------------------------------------------------ |
pandy |
Nov 17 2011, 09:09 AM
Post
#7
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,733 Joined: 9-August 06 Member No.: 6 |
You are right. That's why the hide thing works... Thanks. I knew I should have read up.
I wonder why that is though, if JS it's designed with the hiding technique in mind or if the hiding technique utilizes some kind of oddity in JavaScript. |
Lo-Fi Version | Time is now: 28th April 2024 - 07:24 AM |