A simple text field besides a rectangular box , how to ?

[redcodeheaven]

Hi guys,I was thinking about the code to :
write something inside the text box and if the word entered is equal "hero" for example the box next to it will turn green means correct, otherwise it will turn red means wrong,and if nothing entered it stays white.
I really like to know how we code that in javascript using functions, without any CSS or anything else.
That means we have 2 objects a text box and a rectangle for feedback color.
Remark: there is no button at all, the validation will be each time you are typing.


A Bonus question : if someday we decide to change the color with pictures , is it possible to do that?
Thank you very much for your help, much appreciate it.

[Jibran]

This is possible. A good example is the password strength custom component which changes color based on the user password length. You can google it.

[Dormilich]

without any CSS or anything else.

why making it overly complicated like that?

[redcodeheaven]

ok you can use whatever you feel conveniable.

[Dormilich]

the approach is quite straightforward: if the user entered something, i.e. changed the input value (onchange), test if the phrase matches the default. in this case swap the class names of the indication field so that you get the right look (different colour or image).

[redcodeheaven]

I appreciate if someone can bring up the solution .Thanks.

[Dormilich]

you mean, writing the code for you?

[acoder]

If you want an example, here's one. Not necessarily the best example to learn what's going on because I didn't look for a tutorial and this was one I'd seen years ago. If you search, you'll find many useful tutorials out there.

Try something and, if you get stuck, post back here with your code.

[redcodeheaven]

I am not trying to push anyone to write the code, but I am trying to learn.How can an object affect the other object.Those replies about some examples written are not really the best example.Is there something more precise if nobody like to write the code?.
Thank you.

[Dormilich]

just a little explanation from what I said:

if the user entered something, i.e. changed the input value (onchange),.

here I refer to an event (the event, when a user enters a character in the input field)

// input refers to the text box element
// onchange is the event, that occurs if a value changes
// doSomething() is the function executed, when the event occurs
// false means it’s in the bubbling phase
 
 input.addEventListener("change", doSomething, false);

test if the phrase matches the default.

the condition, when something should be done

if ("hero" == this.value)
{
    // execute code
}

in this case swap the class names of the indication field so that you get the right look (different colour or image)

styling, such as background colours, background images, etc. should be done using CSS. a very simple way to change the styling is by attaching classes to the elements (see e.g. CSS Zen Garden). if you style the class with CSS, you don’t have to alter the JavaScript, if you need a new styling.

// a basic approach
// elem refers to the indication element
if ("hero" == this.value)
{
    elem.className = "correct";
}
else
{
    elem.className = "wrong";
}

[acoder]

What did you not understand about the example I posted? The approach is the same or similar to what Dormilich has been suggesting.

[redcodeheaven]

acoder and Dormilich thanks both of you for your reply.
Dormillich , I really appreciate your help and sorry to take your time.
I will try to write the code and see what I got and hopefully learn from it.
Thank you Sir.