Textbox Color if Value=

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • kirtangl
    New Member
    • Mar 2008
    • 1

    Textbox Color if Value=

    Hi

    I am kinda a noob when it comes to coding, but I have been doing some html, javascript etc. I'm creating a stopwatch (using a code I found and edited a little bit) But I need to make one change, I want the text box's to change form one color to another when the time goes past 900seconds, or 15 minutes. Here is the script I'm using...

    Code:
    <html>
    <head>
    
    </head>
    
    <body bgcolor="#000000">
    
    <center>
    
    
    <font color="#FFFFFF">
    <h2>Stopwatch</h2>
    </font>
    
    <form name=exf1> <font color="#FFFFFF"><b>
    H: <input size=1 type=text name=hour  value="0" onfocus=blur()>&nbsp;
    
    M:  <input size=2 type=text name=tmin   value="0" onfocus=blur()>&nbsp;
    
    S:  <input size=3 type=text name=sec   value="0" onfocus=blur()>&nbsp;
    
    </b></font>
    
    <br><br>
    
    <input type=button value="Start / Reset" onclick="startIt()">
    <input type=button value="Stop" onclick="stopTimers()">
    </form>
    
    
    <script>
    var _myTimer_ms = null;
    var _myTimer_s  = null;
    var _myTimer_m  = null;
    var _myTimer_h  = null;
    function updateS()  { document.exf1.sec.value   = (1+parseInt(document.exf1.sec.value))  }
    function updateM()  { document.exf1.tmin.value  = (1+parseInt(document.exf1.tmin.value))  }
    function updateH()  { document.exf1.hour.value  = (1+parseInt(document.exf1.hour.value));  }
    function startIt() {
      stopTimers();
      resetTime();
      _myTimer_s  = setInterval("updateS()",1000);
      _myTimer_m  = setInterval("updateM()",1000*60);
      _myTimer_h  = setInterval("updateH()",1000*60*60);
    }
    function stopTimers() {
      clearInterval(_myTimer_s);
      clearInterval(_myTimer_m);
      clearInterval(_myTimer_h);
    }
    function resetTime() {
      document.exf1.sec.value=0;
      document.exf1.tmin.value=0;
      document.exf1.hour.value=0;
    }
    
    </script>
    
    </center>
    
    </body>
    </html>
    I'm sure this would be possible with a If function, but I learn C++ back in the day(not a lot) and the one i wrote, for C, did not convert well. any help would be appreciated.

    Thank You
    Kirt
  • acoder
    Recognized Expert MVP
    • Nov 2006
    • 16032

    #2
    To change the colour, use formElement.sty le.color = 'the color' where formElement is the element to change. You can use setTimeout to call the function to change it after 1000*60*15 milliseconds.

    Comment

    Working...