/    Sign up×
Community /Pin to ProfileBookmark

Problem with changing background color throug text box

Copy linkTweet thisAlerts:
Jan 13.2005

This is how the code looks:

<P align=center>

<form name=”color_form”>
<input type=”text” name=”color_of_bg” onChange=”chngBgColor(window.document.color_form.color_of_bg.value)” size=”20″>
</form>

</P>

Here’s the function:

//Function to change background color
function chngBgColor(the_new_color)

{
window.document.bgColor = the_new_color;
}

When I use this on a webpage, it doesn’t work. Anybody know why?
I want it to change the background color to something close to the name the visitor types in the text box without the visitor having to click a button.

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@KorJan 13.2005 — [code=php]
<input type="text" name="color_of_bg" onChange="chngBgColor(this.value)" size="20">

and

function chngBgColor(the_new_color)
{
document.getElementsByTagName('body')[0].style.backgroundColor = the_new_color;
}

[/code]
Copy linkTweet thisAlerts:
@KorJan 13.2005 — 
I want it to change the background color to something close to the name the visitor types in the text box without the visitor having to click a button.
[/quote]
Hm... and if he mistypes? Better use a combo box with pre-set colors... And use as values hexa or rgb .
Copy linkTweet thisAlerts:
@JohnooauthorJan 13.2005 — I've read in "The book of Javascript" by Thau that when passing something to bgColor which is not a real color, the browser tries to guess which color you mean and then displaying that color. So that shouldn't be the problem. I tried using you function, but then I got an error on exactly that line of coding. It said that the property was not valid.
Copy linkTweet thisAlerts:
@KorJan 13.2005 — maybe... but the modern browsers don't use anymore

document.bgColor

the document's color is to be:

document.body.style.backgroundColor (non standards compliant mode browsers)

or

document.documentElement.style.backgroundColor (in standards compliant mode browsers)

or the simple cross-browser

document.getElementsByTagName('body')[0].style.backgroundColor

There might be a way to "guess" the color when typing, but, well, the list of string color accepted by browsers are rather small...
×

Success!

Help @Johnoo spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...