By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
429,301 Members | 3,690 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 429,301 IT Pros & Developers. It's quick & easy.

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

P: 13
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.
Jan 9 '10 #1
Share this Question
Share on Google+
11 Replies


P: 30
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.
Jan 9 '10 #2

Dormilich
Expert Mod 5K+
P: 8,639
without any CSS or anything else.
why making it overly complicated like that?
Jan 9 '10 #3

P: 13
ok you can use whatever you feel conveniable.
Jan 9 '10 #4

Dormilich
Expert Mod 5K+
P: 8,639
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).
Jan 9 '10 #5

P: 13
I appreciate if someone can bring up the solution .Thanks.
Jan 9 '10 #6

Dormilich
Expert Mod 5K+
P: 8,639
you mean, writing the code for you?
Jan 10 '10 #7

acoder
Expert Mod 15k+
P: 16,027
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.
Jan 10 '10 #8

P: 13
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.
Jan 13 '10 #9

Dormilich
Expert Mod 5K+
P: 8,639
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)
Expand|Select|Wrap|Line Numbers
  1. // input refers to the text box element
  2. // onchange is the event, that occurs if a value changes
  3. // doSomething() is the function executed, when the event occurs
  4. // false means itís in the bubbling phase
  5.  
  6. input.addEventListener("change", doSomething, false);
test if the phrase matches the default.
the condition, when something should be done
Expand|Select|Wrap|Line Numbers
  1. if ("hero" == this.value)
  2. {
  3.     // execute code
  4. }
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.
Expand|Select|Wrap|Line Numbers
  1. // a basic approach
  2. // elem refers to the indication element
  3. if ("hero" == this.value)
  4. {
  5.     elem.className = "correct";
  6. }
  7. else
  8. {
  9.     elem.className = "wrong";
  10. }
Jan 13 '10 #10

acoder
Expert Mod 15k+
P: 16,027
What did you not understand about the example I posted? The approach is the same or similar to what Dormilich has been suggesting.
Jan 13 '10 #11

P: 13
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.
Jan 14 '10 #12

Post your reply

Sign in to post your reply or Sign up for a free account.