Change text/font colour based on user input

Question

I'm trying to build some JavaScript code that detects the users input in a textbox.

If the user enters, for example, the word 'test', I want the text/font colour to change to green.

Any other text that the user enters (such as 'tes', 'test1', 'testlm', 'biscuit', etc.) should change the text/font colour to red.

I've tried multiple ways of doing this with no avail. Please note that I am an absolute beginner with JavaScript and I am 'playing around' with code to help me learn it. Therefore, if the code is messy or completely wrong, I apologise for my lack of knowledge.

Here is the JavaScript code for the first test:

<script type="text/javascript">
function checkKey() {
var plaintext = document.getElementById("textbox");
var correct = input.style.color = '#66CD00';
var incorrect = input.style.color = '#FF0000';

if(plaintext =='test')
    {
       document.getElementById("textbox").innerHTML = correct;
}
else 
   {
       document.getElementById("textbox").innerHTML = incorrect;
   }

};
</script>

And the HTML code for the textbox:

<input type="text" id="textbox" name="plaintext" onKeyDown="checkKey()">

The second test is the same as the first, with the only difference in the JavaScript code being the 'var correct' and 'var incorrect' parts:

var correct = str.fontcolor("green");
var incorrect = str.fontcolor("red");

Both tests didn't work. I even took away the brackets in the HTML textbox code for the onKeyDown attribute for both tests:

<input type="text" id="textbox" name="plaintext" onKeyDown="checkKey">

Which again didn't work.

I was wondering if there's any way to achieve my aforementioned desired outcome? Have I done anything right in my experimental code?

Thanks in advance for your time (and sorry for the long question).

Answer 1

Here is an example to complete your initial request. I will edit this answer in a few to give you some pointers regarding your code.

https://jsfiddle.net/h05hgf3g/2/

JS

function checkKey() {
 var plaintext = document.getElementById("textbox"); 
 if(plaintext.value != 'test') {
  plaintext.style.color = "#FF0000";
 }
 else {
   plaintext.style.color = "#66CD00";
 }
}

HTML

<input type="text" id="textbox" name="plaintext" onKeyUp="checkKey()">

Regarding your code:

<script type="text/javascript">
function checkKey() {
var plaintext = document.getElementById("textbox");

Here you declare plaintext as the object with the Id textbox. Later on, you use the whole document.getElementById command again also for textbox. Since you have put this object into the variable plaintext, you can just refer back to it as plaintext moving forward. Keep in mind variables declared inside of a function only live inside that function if they are declared with var.

var correct = input.style.color = '#66CD00';
var incorrect = input.style.color = '#FF0000';

You are not able to use = twice in a statement like above

if(plaintext =='test')

plaintext is a variable which is currently storing the input object as whole. If you check it's value at the highest level you will see that is it: [Object HTML INPUT Element]. Therefore, the object itself will never equal anything besides that right there. If you are looking for the value that this object is currently retaining, we use .value.

    {
       document.getElementById("textbox").innerHTML = correct;

Here is where we can reuse our plaintext variable instead of calling document.getElementById again. So we switch that to plaintext and then we want to assign the value of this object a different color.

}
else 
   {
       document.getElementById("textbox").innerHTML = incorrect;
   }

};
</script>

In Summary:

You are off to a good start and if you wrote that code you posted, though it was technically inaccurate, it does show signs of trying to figure out solutions on how to do things. From here, there are all sorts of things you can do with this tiny example to expound on it and make it much more dynamic.

Possible things to add on/think about:

• What happens when a user writes 'Test' instead of 'test'
• What if you have 4 input boxes that you want to follow all the same coloring rules? Do you need to make 4 separate functions, 1 for each? Or can you re-use the same single function to manage all 4 inputs?
• What about having the user select a color he/she chooses?

Answer 2

<input type="text" id="textbox" name="plaintext" onkeyup="checkKey();">
<script>
function checkKey() {
    if(document.getElementById("textbox").value ==='test')
    {
       document.getElementById("textbox").style.color = "#00FF00";
    }
    else 
    {
       document.getElementById("textbox").style.color = "#FF0000";
    }
}
    </script>

Check this code.