title: How to change input border-color, with jQuery, depending on its value?
body: <p>I have question about jQuery. I have code below which works fine; it changes <code>input</code> <code>border-color</code> depending on its value, which is typed and entered. But if in <code>input</code>'s value on page-load it does not change that <code>border-color</code>. How can I make the <code>border-color</code> change from the beginning, following page-load?</p>
  
  <p>Thank you :)</p>
  
  <pre><code>&lt;input type="text" class="col" value=""&gt;
  
  
  // When the &lt;input&gt;'s value changes
  $("input").change(function() {
  
  // If the value is less than 7, add a red border
  if ($(this).val() &lt; 7) {
      $(this).css("border", "5px solid red");
  }
  
  // Else if the value is equal to 7, add a green border
  else if ($(this).val() == 7) {
      $(this).css("border", "5px solid green");
  }
  
  // Else if the value is greater than 7, add an orange border
  else if ($(this).val() &gt; 7) {
      $(this).css("border", "5px solid orange");
  }
  
  // Else if the value is anything else, add a black border
  else {
      $(this).css("border", "5px solid black");
  }
  
  });
  </code></pre>