How to reset value after button click?

  html, javascript

I’m creating a simple app in which user provides a number and square is generated with the given number. The problem is that when the user provides the input the first time, it works as intended, but when the user edits the value and clicks the button, the value adds with the existing value and it displays the square of the sums. I want to reset the input after the button click, but haven’t got any clue how to do. Any solutions

The html code looks like this

<div class="intro">
   <h1>Select no of squares to be made</h1>
   <small>This experience is better with the values between 400 and 600</small>
   <input type="number" id="squaresInput">
   <button class="show">Go</button>
</div>

And js file is

const userInput = document.getElementById('squaresInput')
const btnInput = document.querySelector('.show')
btnInput.addEventListener('click', () => getUserInput())
let squaresNum

function getUserInput(){
    let squaresNum = userInput.value

    for(let i = 0; i < squaresNum; i++){
        const square = document.createElement('div')
        square.classList.add('square')
    
        square.addEventListener('mouseover', () => setColor(square))
        square.addEventListener('mouseout', () => removeColor(square))
    
        container.appendChild(square)
    }
}

Source: Ask Javascript Questions

LEAVE A COMMENT