helloAdv

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Hello,world!</title>
    </head>
    <body>
        <div style="text-align: center; display: none;" id="main">
            <h1 id="greeter">Hello, Stranger!</h1>
            <input id="nameIn" type="text">
            <button id="btn">Say hello!</button>
        </div>
        <div style="text-align: center; display: block;" id="disp">
            <button id="showBtn">SHOW!</button>
        </div>
        <script>
            showBtn.addEventListener( "click" , function() {main.style.display='block'; disp.style.display='none'});
            greeter.addEventListener( "click" , function() {main.style.display='none'; disp.style.display='block'});
            btn.addEventListener( "click" , function() {greeter.innerText = "Hello, " + (nameIn.value !="" ? nameIn.value + "!" : " John Doe!");});
        </script>
    </body>
</html>