HTML/JS: Change inner.HTML and reset it back

Question

So I have got this HTML-Code

<button id="demo" onclick="toogleFunction()">Login</button>

and this JS-Code

function toogleFunction()
{
var x = document.getElementById('but_login');
if (x.style.display === 'none') {
    x.style.display = 'block';
} else {
    x.style.display = 'none';
}

document.getElementById("demo").innerHTML = "Insert your data!";
}

The code does what it sould do: - it is showing me the spoiler - the name changes

My question is: How can I do it so that it changes the name back to "login", when I click again on the button, or when I click on another button.

Thanks!

Answer 1

function toogleFunction()
 {
    var x = document.getElementById('but_login');
    var demo  = document.getElementById("demo")
    var text  = demo.innerText;

    if (x.style.display === 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }

    if(text === "Login"){
      demo.innerText = "Insert your data!";
    }else{
      demo.innerText = "Login";
    }
 }