title: JavaScript - How to empty the input field when it value has been updated to " " in a click event callback function
body: <p>So here is my code </p>
  
  <pre><code>&lt;button class="btn-new"&gt;&lt;i class="ion-ios-plus-outline"&gt;&lt;/i&gt;New game&lt;/button&gt;
  &lt;button class="btn-roll"&gt;&lt;i class="ion-ios-loop"&gt;&lt;/i&gt;Roll dice&lt;/button&gt;
  &lt;input type="text" placeholder="Target" class="target"&gt;
  
  document.querySelector('button.btn-roll').addEventListener('click', function(){
      var input = document.querySelector('.target').value;
      if(input){
          var winningScore = input
      }else {
          winningScore = 100;
      }
  document.querySelector('.btn-new').addEventListener('click',function(e,input){
      input = '';
    })
  })  
  </code></pre>
  
  <p>I am assigning the value entered in the input field to a variable when user clicks on roll dice button and trying to empty the input field making it " " when the user clicks on new game button. This doesn't throw an error but I am still able to see the value even when I click the new game button. I also see the input field getting emptied when I write it as <code>document.querySelector('.target').value = ' ';</code> 
  but doesn't work  when I write it just using the variable name <code>input = '';</code>. </p>
  
  <p>Can someone please tell me whats the mistake in the code here ?.  </p>