The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Accepting user input
slantt
post 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" />
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Nov 16 2011, 03:18 PM
Post #3


.
********

Group: WDG Moderators
Posts: 9,653
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





User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
slantt
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 16 2011, 05:13 PM
Post #5


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
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
*/
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Brian Chandler
post Nov 17 2011, 04:18 AM
Post #6


Jocular coder
********

Group: Members
Posts: 2,460
Joined: 31-August 06
Member No.: 43
QUOTE(pandy @ Nov 17 2011, 07:13 AM) *

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
//------------------------------------------------------------------------------
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 17 2011, 09:09 AM
Post #7


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Client-side Scripting · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 19th April 2024 - 11:40 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC