I need a button that will refresh the page on the user's click. I tried this:
<input type="button" value="Reload Page" onClick="reload">
or
<input type="button" value="Refresh Page" onClick="refresh">
But neither worked.
Use onClick with window.location.reload(), i.e. :
<button onClick="window.location.reload();">Refresh Page</button>
Or history.go(0), i.e.:
<button onClick="history.go(0);">Refresh Page</button>
Or window.location.href=window.location.href for 'full' reload, i.e.:
<button onClick="window.location.href=window.location.href">Refresh Page</button>
This works for me:
function refreshPage(){
window.location.reload();
}
<button type="submit" onClick="refreshPage()">Refresh Button</button>
I noticed that all the answers here use inline onClick handlers. It's generally recommended to keep HTML and Javascript separate.
Here's an answer that adds a click event listener directly to the button. When it's clicked, it calls location.reload which causes the page to reload with the current URL.
const refreshButton = document.querySelector('.refresh-button');
const refreshPage = () => {
location.reload();
}
refreshButton.addEventListener('click', refreshPage)
.demo-image {
display: block;
}
<button class="refresh-button">Refresh!</button>
<img class="demo-image" src="https://picsum.photos/200/300">