onFocus change Value?

Ok so I want to use a live preview using JavaScript.

What I want is when a user input a color name like red or #FC9442

when they click out of the input box it changes somewhere else

preferrably

<div style='background:IT CHANGES HERE;'></div>

Get where I am going with this?

You'll want to use an on change because onfocus will change the value before the user can input anything, but this is what you'll have.


function chngColor(el){
document.getElementById('element you want to change').backgroundColor = el.value;
}

// you would use it like this
<input type="text" onchange="chngColor(this);" />

I'm sorry. I don't understand. :\

Please explain what is it that you do not understand? It seems perfectly clear to me.

But there is a big problem - what happens when the user types something invalid into the box? Such as #FG9942 or reed or blew. It would be possible but rather cumbersome to validate the entry.


Quizmaster: In seafood on a restaurant menu, the French word "poisson" translates into English as what?
Contestant: Chicken

Nice and easy

in your Header

<script type="text/javascript">
function changeC(color)
{
// Change "" to the Object you want to style E.G "MyBox"
document.getElementById("").style.bgColor = color;
}
</script>


in your Text box use
<input type="text" onChange="ChangeC(this.value);" ect...

And it will work

Wouldn't onblur work better for this?

They would both work the same because onchange will only take effect once the form element loses focus after being changed.

Ahh ok. So it's like this:

<script type="text/javascript">
function changeC(color)
{
// Change "" to the Object you want to style E.G "MyBox"
document.getElementById("MyBox").style.bgColor = color;
}
</script>


<input type="text" onChange="ChangeC(this.value);">

<div style='width: 300px; height: 100px;' name='MyBox'></div>

Right? If not, someone fix? :-)

'bgColor' should be 'background' or 'backgroundColor'

Ah ok like this:

<script type="text/javascript">
function changeC(color)
{
// Change "" to the Object you want to style E.G "MyBox"
ocument.getElementById("MyBox").style.backgroundColor = color;
}
</script>


<input type="text" onChange="ChangeC(this.value);">

<div style='width: 300px; height: 100px;' name='MyBox'></div>

But it doesn't work.

are you also imputing the hash tag (#) because that is required so you can either input it or append it to the the front of the user input

Where would I put the # at?

Either you would have to type it in before the color, or do something like this:


document.getElementById("MyBox").backgroundColor = "#" + color


However if you do that, inputs like "darkblue" or things of that nature wouldn't work.

Thjis is not working =(


<script type="text/javascript">
function changeC(color)
{
// Change "" to the Object you want to style E.G "MyBox"
document.getElementById("MyBox").backgroundColor = "#" + color
}
</script>


<input type="text" onChange="ChangeC(this.value);">

<div style='width: 300px; height: 100px;' name='MyBox'></div>

ok you still had a few problems
If you are going to change something to do with the style of an object you must declare that you are altering the style
function changeC(color){
// Change "" to the Object you want to style E.G "MyBox"
document.getElementById("MyBox").style.backgroundColor = "#" + color;
}
also to use getElementById you need it to have an id
<div style='width: 300px; height: 100px;' id='MyBox'></div>
Also when you are using a function it is case sensitive so if you declare the function to be changeC you have to always call it as changeC
<input type="text" onChange="changeC(this.value);">

Actually you know what I would do to like lets say I put in a color name in an inout box. I click out of it and the following appears like:

<div style='color:$colorname'></div>

You know? When they click out of the box it updates?