title: Enter information in input and shows the information on the div's textContent simultaneously
body: <p>I'm a HTML JS beginner.
  Right now I'm doing a Meme generator project and I encounter a problem</p>
  <p>this is my HTML code</p>
  <pre><code>//this is input tag
  
  &lt;div&gt;
  &lt;input type=&quot;text&quot; placeholder = 'text' class=&quot;mtext&quot;&gt;
  &lt;input type=&quot;text&quot; placeholder = 'text' class=&quot;mtext&quot;&gt;
  &lt;/div&gt;
  
  //this is my div block.
  
  &lt;div id = &quot;meme&quot;&gt;
       &lt;div class=&quot;mtext1&quot; style = 'left: 5px; top: 5px; width: 400px; height: 25px'&gt;&lt;/div&gt;
       &lt;div class=&quot;mtext1&quot; style = 'left: 5px; top: 5px; width: 400px; height: 25px'&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  </code></pre>
  <p>and my thought is wanting to use &quot;addEventListener&quot; to solve this problem.</p>
  <pre><code>
  const  inputText = document.querySelectorAll('.mtext')
  const showTextBox = document.querySelectorAll('.mtext1')
  
  
  inputText.addEventListener('????' , function(){
    showtextbox.textContent += 
  
  })
  </code></pre>
  <p>the first problem is what addEventListener parameter is proper to meet my expectation? That I can type into the text box and shows the result on div box at the same time.</p>
  <p>the second problem is my inputText and showTextBox are array-like value, how can I extract the value for each of inputText and represent to the right showTextBox?</p>
  <p>Thank you</p>