title: Change an input when you change another one in javascript
body: <p>I have two input fields.<br>
  For example: One where you type in a color and another for the code of the color. </p>
  
  <p>Like this: <code>|Green| |#008000|</code> </p>
  
  <p>I do not want to learn how to find the color-code but how to match a value or variable with another. It was just an example. </p>
  
  <p>What i wanna know is how I in the best way auto generate one of the fields when I fill in the second. When I type 'green' in the first field I want the code to automatically appear in the second and vice versa. I just want to do it for a few colors. </p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
    &lt;script type="text/javascript"&gt;
  
  var inputA = document.getElementById("color");
  var inputB = document.getElementById("code");
  
  inputA.onkeyup = function() {
     var v = this.value.toLowerCase();
      if (colormapping.color2code[v]){
         inputB.value = colormapping.color2code[v];
      } else {
          inputB.value = '';
      }
     }
  inputB.onkeyup = function() {
     var v = this.value.toUpperCase();
      if (colormapping.code2color[v]){
          inputA.value = colormapping.code2color[v];
      } else {
          inputA.value = '';
      }
  }
  colormapping = {
      color2code:{
         green : '#008000',
         red   : '#FF0000'
      },
      code2color:{
         '#008000':'green',
         '#FF0000':'red'
      }
  }
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  Name:&lt;br /&gt;
  &lt;input id="color"&gt;&lt;br /&gt;
  Code:&lt;br /&gt;
  &lt;input id="code"&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This is how far I've come. The problem probably is my tags. Why is it not working? :/</p>