How to change the color of text defined in a class

Is color changed to black if number enter is 100 and 100,000 or  ( 100 or 100,000)?

Hope understand your question.If not , please point it out

Duncan

$(document).ready(function() {
	$('.Require').keydown(function() {
		var num=$(".Require").text();

		if (event.keyCode == 13 && (num==100 || num==100000)) {
$(".Require").css("color",'black');
}
});
});

Select allOpen in new window

1) Move style/css above js

2) Change labels where you have class="Require" to below.  Notice I removed the class and added an ID
<div id="measureLabel">* Required</div></div><!--leftcolumn-->
<div id="selectPitchLabel">* Required</div>

3) At the start of the main function, set the two new div's to "Required" via jquery

$(function () { //WAIT UNTIL THE PAGE LOADS
   //RESET LABEL
    $('#measureLabel').addClass('Require');
    $('#selectPitchLabel').addClass('Require');

Select allOpen in new window

4) Reset label on change of dropdown

  // CHECK FOR A CHANGE IN THE DROP DOWN MENU
     $('#selectPitch').change(function () {
       
       $('#selectPitchLabel').addClass('Require'); // RESET LABEL
         var roofAreaVal = $(this).val();  // GET VALUE OF DROPDOWN
    

Select allOpen in new window

   

5) Change below comparison from !== to !=
 if (roofAreaVal !== 0) {  // CHECK TO MAKE SURE THERE IS A VALUE IN THE DROP DOWN
to
 if (roofAreaVal != 0) {  // CHECK TO MAKE SURE THERE IS A VALUE IN THE DROP DOWN

6) set selectPitchLabel ID to remove the 'Require' class turning it black

if (roofAreaVal != 0) {  // CHECK TO MAKE SURE THERE IS A VALUE IN THE DROP DOWN
            
             calc(roofAreaVal);  // RUN THE FUNCTION TO MAKE THE CALCULATIONS 
             $('#selectPitchLabel').removeClass('Require');
             $('#roofMesg').val('Roof ' + newAreaTxt + ' added ' + roofAreaVal);
         }

Select allOpen in new window

7) In the measurement label, reset to add the 'Require' class on change
   

 
$('#in').change(function () {  // DETECT CHANGE IN THE TEXT FIELD
     $('#measureLabel').addClass('Require'); //   RESET LABEL

Select allOpen in new window

 
8) When we have a good value in the measurement text field, remove the the 'Require' class

if (inVal <= 0) {  //IF IT IS NUMERIC, CHECK THAT THE NUMBER IS GREATER THAN 0

                 clearFields();  // IF NOT, CLEAR THE FIELDS 
                 alert('Please enter a positive number greater than zero');  // AND SEND THE ALERT
             } else {
                   $('#measureLabel').removeClass('Require'); // CHANGE LABEL FROM RED TO BLACK
                 calc(roofAreaVal);  // WE HAVE A GOOD VALUE, RUN THE FUNCTION TO MAKE THE CALCULATIONS 
             }
         }

Select allOpen in new window

You can see a working sample of this with the changes I made.  The sample on jsbin will not load your main css  http://jsbin.com/hagiy/1/edit

Notice that the red text gets bigger. I would suggest adding a css class were you set the font size only then add that class via the html to those two labels.  Then in your required class, you can remove the font size and just keep the color.

fyi, I commented out that added function for 'int' giving the error because I don't know what that is.  If you can explain what you format is wrong in the output we can make a proper adjustment.

>line 356 under textbox change text to black when numbers entered is 100 and 100,000

Duncan has a good idea. However, instead of adding on additional functions, I think it is best to keep it in the logic of the original js.  My sample did not check for the range, but if it is out of range, that should perhaps throw another alert.

And a function that detects a range, should really go in this bit of code

$('#in').change(function () {  // DETECT CHANGE IN THE TEXT FIELD
        
         roofAreaVal = $('#selectPitch option:selected').val(); // GET THE VALUE OF THE SELECT MENU
         var inVal = parseFloat($('#in').val());   // CONVERT THE VALUE OF THE TEXT BOX TO A FLOAT NUMBER
         inVal = inVal.toFixed(1); // USE ONLY ONE DECIMAL PLACE FOR THE  VALUE
         inVal=inVal==Int(inVal)?Int(inVal):inVal;
         $('#in').val(inVal); // SEND THE NEW NUMBER BACK TO THE FIELD TO VISUALLY SHOW THE CONVERSION
         if (!$.isNumeric(inVal)) { // DETECT IF OUR NUMBER IS NUMERIC

             clearFields(); // IF NOT NUMERIC, RUN THE CLEAR FIELDS FUNCTION (SET EVERYTHING TO BLANK)
             alert('Please enter a valid number'); //ALSO SEND AN ALERT
         } else {
             if (inVal <= 0) {  //IF IT IS NUMERIC, CHECK THAT THE NUMBER IS GREATER THAN 0

                 clearFields();  // IF NOT, CLEAR THE FIELDS 
                 alert('Please enter a positive number greater than zero');  // AND SEND THE ALERT
             } else {

                 calc(roofAreaVal);  // WE HAVE A GOOD VALUE, RUN THE FUNCTION TO MAKE THE CALCULATIONS 
             }
         }
     });

Select allOpen in new window

Where we have
calc(roofAreaVal);  // WE HAVE A GOOD VALUE, RUN THE FUNCTION TO MAKE THE CALCULATIONS
Right before that line is a good spot to check if the number is in range

I must be doing something wrong, but when i move the styles above the functions the styles no longer work

the styles moved
http://roofgenius.com/test10.asp

Things are still a bit messed up on your page.  See if this primer helps understand http://jsbin.com/wuyizu/1/edit?html,output

<!DOCTYPE html>
<html>
<head>
  
  <!-- ADD CSS HERE -->
<link href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
  <!-- LOAD CSS IN ORDER OF IMPORTANCE.  MOST IMPORTANT AT THE BOTTOM -->
  <style>
    .someClass{
      color:red;
      font-size:14px;
    }
    </style>
  <!-- ADD JS HERE -->
  <!-- KEEP DEPENDENT SCRIPS BELOW THEIR PARENT-->
  <script>
    // below WILL NOT work because it is loaded BEFORE jquery
    $(function(){
    $('div#test').addClass('someClass');
    });
    </script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
   <script>
    // below WILL work because it is loaded AFTER jquery
     $(function(){
    $('div#test_two').addClass('someClass');
     });  
    </script>
  <meta charset="utf-8">
  <title>padas</title>
</head>
<body>
  <div id="test">I am black</div>
  <div id="test_two">I am red</div>
</body>
</html>

Select allOpen in new window

To better show css, adding the same class twice. The last one wins. (red)

<!DOCTYPE html>
<html>
<head>
  
  <!-- ADD CSS HERE -->
  <style>
    .someClass{
      color:black;
      font-size:14px;
    }
    </style>
<link href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
  <!-- LOAD CSS IN ORDER OF IMPORTANCE.  MOST IMPORTANT AT THE BOTTOM -->
  <style>
    .someClass{
      color:red;
      font-size:14px;
    }
    </style>
  <!-- ADD JS HERE -->
  <!-- KEEP DEPENDENT SCRIPS BELOW THEIR PARENT-->
  <script>
    // below WILL NOT work because it is loaded BEFORE jquery
    $(function(){
    $('div#test').addClass('someClass');
    });
    </script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
   <script>
    // below WILL work because it is loaded AFTER jquery
     $(function(){
    $('div#test_two').addClass('someClass');
     });  
    </script>
  <meta charset="utf-8">
  <title>padas</title>
</head>
<body>
  <div id="test">I am black</div>
  <div id="test_two">I am red</div>
</body>
</html>

Select allOpen in new window

i see i have a lot to fix
does the css get entered before the mtea tags ?

The css and js are in the head section.  Where you put the meta tags does not matter.  Just be consistent.  

Some people will put all of their js just above the closing </body> tag.   There are arguments for and against either way.  Again, just be consistent.

Before I get to changing the label colors i want to make sure the page layout problems are corrected.

I think i got the laid out correctly with the function clearFields moved to the head and working
Re: the * Required red-black labels
the one under the textbox does not work only the one under the combo
I thought i had followed you step by step, but was unsure of some code placement
Could you look ?
http://roofgenius.com/test2.asp

whoops thats
http://roofgenius.com/test1.asp

Thank you that fixed it
http://roofgenius.com/test1.asp
I am going to ask another adjustment question, hope you answer