title: Clearing input field in JavaScript after click event
body: <p>I made a simple list items page with JavaScript. And everything works just as expected. What I want is that, every time I add a new list-item, the input field should be cleared. As in the value should be deleted. </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>function addItem() {
  
    if (document.querySelector('.text-input').value) {
  
      const listItem = document.createElement('li');
      listItem.className = 'list-item'
      var input = document.querySelector('.text-input').value;
      listItem.textContent = input;
      document.querySelector('.list').appendChild(listItem);
      document.querySelector('.text-input').value = '';
  
  
    }
  
  }
  
  document.getElementById('btn').addEventListener('click', addItem);</code></pre>
  </div>
  </div>
  </p>
  
  <p>And I actually achieved what I wanted with that last line of code in the addItem callback function. However instead of writing <code>document.querySelector('.text-input').value = '';</code>, if I write <code>input = '';</code>, it doesn't work. And this is not making any sense to me cause I declared that variable within that function and also used it for <code>listItem.textContent = input</code>; as you can see. </p>