title: Changing a Value on Key Up
body: <p>This may be a simple JavaScript problem, but I really don't know what's wrong with my code.</p>
  
  <p>What I would want to do is very simple, there is an input element in my template, and I would like to change the value of it whenever there is a key up.</p>
  
  <p>The following is the relevant part of my code.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var track = document.getElementById("id_tracking");
  track.value = "a";
  
  function track_record() {
    track.value = "b";
  }
  
  $(document).ready(function() {
    $("#id_urnA_red").keyup(function() {
      c_urn();
      react();
      track_record();
    });
    $("#id_urnA_blue").keyup(function() {
      c_urn();
      react();
      track_record();
    });
  });
  
  function c_urn() {}
  function react() {}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;input id="id_urnA_red" /&gt;
  &lt;input id="id_urnA_blue" /&gt;
  &lt;br&gt;&lt;br&gt;
  &lt;input type="text" name="tracking" id="id_tracking" /&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here, <code>id_urnA_red</code> is an input element. When its value changes, I would like the value of <code>id_tracking</code> to change.
  Other functions <code>c_urn</code> and <code>react</code> are implemented normally on key up. I am confused why <code>track_record</code> is not implemented.</p>
  
  <p>Thank you</p>