title: Output value of textfield to another field while applying the split and join function and replacing words
body: <p>I am trying to combine 2 different JS codes so they both work fine and perform the desired tasks.</p>
  <p>Code 1:
  JS</p>
  <pre><code>let translator = {
  &quot;you&quot;: &quot;yaseelf&quot;,
  &quot;I&quot;: &quot;meseelf&quot;,
  &quot;quick&quot;: &quot;fast&quot;,
  &quot;the&quot;: &quot;dee&quot;
  };
  
  var button = document.querySelector(&quot;#button_1&quot;);
  var input = document.querySelector(&quot;#input&quot;);
  var output = document.querySelector(&quot;#output_main&quot;);
  
  button.addEventListener(&quot;click&quot;, () =&gt; {
  let words = input.value.split(' ');
  let translated = words.map(word =&gt; translator[word] || word);
  output.innerHTML = translated.join(' ');
  })
  </code></pre>
  <p>Code 1: HTML</p>
  <pre><code>&lt;input id=&quot;input&quot; type=&quot;text&quot; value=&quot;Lets go to the park&quot; /&gt;
  &lt;button id=&quot;button_1&quot;&gt;translate&lt;/button&gt;
  
  &lt;textarea id=&quot;output_main&quot;&gt;&lt;/textarea&gt;
  </code></pre>
  <p>The above code works fine where the text of input field is replaced with the words described in array e.g. &quot;quick&quot; is replaced with &quot;fast&quot;.</p>
  <p>The above code is executed when you press the button Translate Button.</p>
  <p>What I want to achieve is when the text is entered in input field, its output should be displayed in the textarea in RUNTIME and the text replacement done in above code should also be done. So No need to press the Translate Button to replace the entered text and output in textarea</p>
  <p>Example:</p>
  <p>In input field, the user enters &quot;The Quick Brown Fox Jumps Over the Lazy Dog&quot;, it should be replaced and displayed in the output field in runtime so the output (without pressing button) should be:</p>
  <p>&quot;dee fast Brown Fox Jumps Over the Lazy Dog&quot;</p>
  <p>So far, I have achieved runtime text output on different text fields using the following code:</p>
  <p>JS:</p>
  <pre><code>function enterAmt(ev) {
      document.getElementById('amt2').value =    ev.value;
  }
  </code></pre>
  <p>HTML:</p>
  <pre><code>Amount 1&lt;input type=&quot;text&quot; id=&quot;input&quot; name=&quot;amtname&quot; size=&quot;5&quot; maxlength=&quot;7&quot; onkeyup=&quot;enterAmt(this)&quot;&gt;&lt;br&gt;&lt;br&gt;
  Amount 2&lt;textarea  name=&quot;amtname&quot; size=&quot;5&quot; maxlength=&quot;7&quot; value=&quot;&quot; id=&quot;amt2&quot;&gt;&lt;/textarea&gt;
  </code></pre>
  <p>I am still a newbie so cannot figure out how to make the both codes work together but, they both do the function individually and now just need help to combine them.</p>
  <p>In short, I want the text entered in input to be replaced (with words I describe like above code 1) and displayed in textarea in runtime i.e. no need to press a button or wait.</p>