JavaScript - How to empty the input field when it value has been updated to “ ” in a click event callback function

Question

So here is my code

<button class="btn-new"><i class="ion-ios-plus-outline"></i>New game</button>
<button class="btn-roll"><i class="ion-ios-loop"></i>Roll dice</button>
<input type="text" placeholder="Target" class="target">

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 = '';
  })
})  

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 document.querySelector('.target').value = ' '; but doesn't work when I write it just using the variable name input = ''; .

Can someone please tell me whats the mistake in the code here ?.

Answer 1

You're just setting the value of your input variable, which has no effect on the DOM element. To set its value, use document.querySelector('.target').value = "" (just like you did when reading the value). Or consider only doing the query once:

var el = document.querySelector('.target');
var input = el.value;
// ...
el.value = "";

Separately, event handlers don't get passed a second argument, so no need for the input parameter on your event handler callback.

Also, even though the var in var winningScore will take effect for the entire function (thanks to var hoisting), it's poor practice to declare it in one branch and not the other; instead, just declare it at the top.

You can also replace that if / else with

winningScore = input || 100;

...if you like, and since that means we only use input in one place, we don't need it anymore.

Finally, you're adding a new event listener to .btn-new every time button.btn-roll is clicked. It seems unlikely to me you want to do that.

Taking all of that into account:

document.querySelector('button.btn-roll').addEventListener('click', function() {
    var el = document.querySelector('.target');
    var winningScore = el.value || 100;
    // ...presumably use `winningScore` here...
});
document.querySelector('.btn-new').addEventListener('click', function(e) {
    document.querySelector('.target').value = '';
});

Answer 2

This doesn't throw an error but I am still able to see the value even when I click the new game button

Can someone please tell me whats the mistake in the code here ?.

Setting your input (coming as a parameter) to '' will change its type from HTMLInputElement to String , and it won't be referring to the input element anymore and it won't set its value property to ""

You need to do

document.querySelector('.btn-new').addEventListener('click',function(e,input){
 input.value = ''; //referring to the input passed as a parameter
})

Here you are also creating a new event-listener on every click on button.btn-roll , you need to move the addEventListener on .btn-new out

var input = document.querySelector('.target');
document.querySelector('button.btn-roll').addEventListener('click', function(){
    if(input.value){
        var winningScore = input.value
    }else {
        winningScore = 100;
    }
})  
document.querySelector('.btn-new').addEventListener('click',function( ){
    input.value = '';
})