Text box colour change

**Farmlord** · 05-21-2012 02:50 PM

Hi there just wondering if its possible to make a text box in java script and then for that box 2 change colour when the user inputs something. For example if they enter 3 it will turn green but if they enter anything else then it will turn red.
Thanks

**vwphillips** · 05-22-2012 04:15 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
.red {
  background-Color:red;
}


/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/

function Color(){
 var args=Color.arguments,obj=args[0],z0=2;
 for (;z0<args.length;z0+=2){
  if (obj.value==args[z0]){
   obj.style.backgroundColor=args[z0+1];
   return;
  }
 }
 obj.style.backgroundColor=args[1];
}
/*]]>*/
</script></head>

<body>
<input class="red" name="fred" onblur="Color(this,'red','3','green','4','blue');" onkeyup="Color(this,'red','3','green','4','blue');"/>
</body>

</html>

**TheAliveWinner** · 05-22-2012 05:06 AM

See, if this helps!

HTML Code:

<!doctype html>
<html>
<head>
    <title>Creating text box dynamically!</title>
</head>
<body>
    <h3>Even numbers are green &amp; Odd ones turn red!</h3>
    <script>
        var textBox = document.createElement('input');
        textBox.setAttribute('placeholder','Enter a number');
        textBox.setAttribute('id','text');
        textBox.setAttribute('onkeyup','Check()');
        document.body.appendChild(textBox);
        
        var Check = function () {
            textBox = document.getElementById('text');
            
            switch((textBox.value) &#37; 2) {
                case 0:
                    textBox.style.color = 'green'; // works if textBox.value is 'even'
                    break;
                default:
                    textBox.style.color = 'red';  // works if textBox.value is 'odd'
                    break;
            }
        }
    </script>
</body>
</html>

**Farmlord** · 05-22-2012 05:32 AM

Thanks for that guys but i found one that dose work and i think will fit better

Code:

<html>
<head>
<title>
</title>
<script type="text/javascript">
function changecolour() {
var val = document.getElementById('mytext').value;
if (val == 3) {
	document.getElementById('mytext').style.backgroundColor = 'green';
	}
	else {
	document.getElementById('mytext').style.backgroundColor = 'red';
	}
}
</script>
</head>
<body>
<form name="form1" id="form1" action="#">
<input type="text" id="mytext" name="mytext" value="" onkeyup="changecolour()" >
</form>
</body>
</html>

This will work better so now i can have 1+1 for example in html and hten use css to postion it and then javscrtipt for the text box. But thank you very much for the help

Thread: Text box colour change

Thread Tools

Display

Text box colour change

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions