title: How to change the background color of an input field when text is entered?
body: <p>I'm pretty new with Javascript and jQuery, and can't seem to indentify the reason why my code acts like it does.</p>
  
  <p>I have created two seemingly identical functions to change the background color of an input field.
  Their goal is to turn the background color of the given input field to the color <code>#00FF7F</code> if anything is typed in the field. And if not, the field should be transparent.</p>
  
  <p>Code JS: </p>
  
  <pre><code>$(document).ready(function () {
      var $input1 = $("#logindata1");
      var $input2 = $("#logindata2");
  
      function onChangeInput1() {
          $input1.css("background-color", "#00FF7F");
          var value = $.trim($(".form-control").val());
  
          if (value.length === 0) {
              $input1.css("background-color", "transparent");
          }
      }
  
      function onChangeInput2() {
          $input2.css("background-color", "#00FF7F");
          var value = $.trim($(".form-control").val());
  
          if (value.length === 0) {
              $input2.css("#background-color", "transparent");
          }
      }
  
      $input1.on("keyup", onChangeInput1);
      $input2.on("keyup", onChangeInput2);       
  });
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>#loginbox {
      width: 400px;
      height: 200px;
      margin-left: auto;
      margin-right: auto;
      margin-top: 25%;
  }
  
  .logindata {
      margin-left: auto;
      margin-right: auto;
      margin-top: 20px;
      height: 60px;
      width: 290px;
      transition: 0.25s ease;
  }
  
  .form-control {
      margin-left: auto;
      margin-right: auto;
      height: 55px;
      width: 288px;
      border-style: none;
      background-color: transparent;
      text-align: center;
      border: solid 2px #00FF7F;
      transition: 0.25s ease;
      font-size: 25px;
      font-family: "Trebuchet MS";
  }
  
  .form-control:hover {
      box-shadow: 0px 0px 30px #2E8B57;
  }
  
  ::-webkit-input-placeholder {
      color: #00FF7F;
  }
  </code></pre>
  
  <p>Simple HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="UTF-8"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
          &lt;title&gt;Test&lt;/title&gt;
  
          &lt;!-- Stylesheet link --&gt;
          &lt;link rel="stylesheet" type="text/css" href="assets/style.css"&gt;
  
          &lt;!-- jQuery link --&gt;
          &lt;script type="text/javascript" src="assets/vendor/jquery-3.1.0.min.js"&gt;&lt;/script&gt;
  
      &lt;/head&gt;
      &lt;body&gt;
  
          &lt;div id="loginbox"&gt;
                &lt;div class="logindata" id="logindata1"&gt;
                    &lt;input type="text" class="form-control" placeholder="Username"&gt;
                &lt;/div&gt;
                &lt;div class="logindata" id="logindata2"&gt;
                    &lt;input type="password" class="form-control" placeholder="Password"&gt;
                &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;!-- Javascript link--&gt;
          &lt;script type="text/javascript" src="assets/js/javascript.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
  </code></pre>
  
  <p>On the jsbin above, try typing in both the Username and Password field to see how they react differently.</p>
  
  <p>Images of what happens. Didn't want to include all images here:</p>
  
  <p><a href="http://imgur.com/a/qgubP" rel="nofollow">http://imgur.com/a/qgubP</a> </p>
  
  <p>I realize there probably is a way to compromise my js/jquery into 1 function that each input field calls instead of have a function for each.</p>