Search code examples
javascriptaddeventlistenerinnerhtmlrevert

Revert innerHTML to default after javascript event

I have an event listener that takes input from the user and replaces the default text "Your Username" with the user input. 

<input type="text" class="search">
<div id="username">Your Username</div>

<script>
    var search = document.querySelector('.search');
    search.addEventListener('input', changeText);
    function changeText() {username.innerHTML = `${this.value}`}
</script>

If the user backspaces all input, I want the innerHTML of the div to revert to the default (i.e. "Your Username"). How can I do this?

Solution

  • Store the original HTML in initialization, then use it in the change listener if valye is an empty string:

    var search = document.querySelector('.search');
var originalHTML = username.innerHTML;
search.addEventListener('input', changeText);
function changeText() {
  username.innerHTML =  this.value !== '' ? this.value : originalHTML; 
}