title: update text entry automatically on change
body: <p>I have a simple HTML form with two text entries. I want to copy the text from the first entry field to the second one as soon as the text in the first field changes. Currently the changes are only applied, when I click the second entry. How can I fix this, so that the changes are visible without having to click the second entry?</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-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;body&gt;
          &lt;form onchange="myFunction()"&gt;
          &lt;label for="field_1"&gt;field 1:&lt;/label&gt;
          &lt;input type="text" id="field_1" name="field_1"&gt;&lt;br&gt;&lt;br&gt;
          &lt;label for="field_2"&gt;field 2:&lt;/label&gt;
          &lt;input type="text" id="field_2" name="field_2"&gt;&lt;br&gt;&lt;br&gt;
          &lt;/form&gt;
  
          &lt;script&gt;
              function myFunction() {
                  var x = document.getElementById("field_1").value;
                  document.getElementById("field_2").value = "copy: " + x;
              }
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>