javascript - 通过onclick函数更改div(Change divs through onclick function)

Question

Currently I have some code that looks like so;

(目前，我有一些类似的代码；)

<div id="welcome">
        <div style="text-align: center;">
            <h1 style="margin-bottom: 0;">Welcome</h1>
            <hr>
            <p>Hi, would you like to sign up or keep watching?</p>
        <button id="intro_signup_button" type="text" onclick="**HERE**">SIGN UP</button>
        <button id="intro_back_button" type="text" onclick="document.getElementById('welcome').style.display='none'">KEEP WATCHING</button>
        </div>
    </div>

    <div id="signup">
        <div style="text-align: center;">
            <p>texttextext</p>
        </div>
    </div>

So when I click the sign up button, I want the div to change to the signup div below, but using the same coding type (if possible) that I used for closing the window.

(因此，当我单击“注册”按钮时，我希望div更改为下面的注册div，但要使用与关闭窗口相同的编码类型（如果可能）。)

I know it's obvious that I'm a beginner, but I've been searching everywhere and playing around with different techniques but I just can't figure it out!

(我知道很明显我是个初学者，但是我一直到处搜寻并且使用不同的技术，但是我无法弄清楚！)

  ask by tttt translate from so

Answer 1

Really as simple as this:

(真的如此简单：)

 #signup { display: none; } 

 <div id="welcome"> <div style="text-align: center;"> <h1 style="margin-bottom: 0;">Welcome</h1> <hr> <p>Hi, would you like to sign up or keep watching?</p> <button id="intro_signup_button" type="text" onclick="document.getElementById('signup').style.display='block';">SIGN UP</button> <button id="intro_back_button" type="text" onclick="document.getElementById('welcome').style.display='none';">KEEP WATCHING</button> </div> </div> <div id="signup"> <div style="text-align: center;"> <p>texttextext</p> </div> </div> 

---

---

And if you want a version that hides the Welcome layer before show the Signup layer:

(如果您想要一个在显示“注册”层之前隐藏“欢迎”层的版本：)

 #signup { display: none; } 

 <div id="welcome"> <div style="text-align: center;"> <h1 style="margin-bottom: 0;">Welcome</h1> <hr> <p>Hi, would you like to sign up or keep watching?</p> <button id="intro_signup_button" type="text" onclick="document.getElementById('signup').style.display='block';document.getElementById('welcome').style.display='none'">SIGN UP</button> <button id="intro_back_button" type="text" onclick="document.getElementById('welcome').style.display='none';">KEEP WATCHING</button> </div> </div> <div id="signup"> <div style="text-align: center;"> <p>texttextext</p> </div> </div>