简体   繁体   中英

How can I edit a page by clicking a button on the another html page?

For example, I have a home page with 2 buttons "show login popup" and "show register popup", and it can popup 2 windows on the homepage. Those 2 popup are divs in the homepage. I keep those 3 html separate, because I want the login and register can shows on any pages as a popup box.

Here is my problem: I have a same "show register popup" button in the login popup page, too. I want to do that, when I click the button, it can hide the login popup (the div in the home page) and "show register popup" on the home page. What should I do?

Here is my code example:

Home Page

 <!DOCTYPE>
<html>
<head>
<title>Home page</title>
<meta charset="UTF-8">
<script src="testjs.js"></script>

</head>

<body>
    <button id="login" onclick="goto_login()">goto login</button>
    <button id="register" onclick="goto_register()">goto register</button>
    <div id="loginPopup" style ="background-color:red; display:none;">
        <object id="login_location" type="text/html" data="login.html"
            style="width:100%; height:50%;">
        </object>
    </div>

    <div id="registerPopup" style="background-color: yellow; display:none;">
         <object id="login_location" type="text/html" data="regi.html"
            style="width:100%; height:50%;">
        </object>
    </div>
</body>
</html>

Login Popup

<html>
<head><script src="testjs.js"></script></head>
<body>

    <input id="id" type="text">
    <input id="pw" type="text">

    <input id="login" type="button" value="login">

    <input id="goto_register" onclick="goto_register()" type="button" value="goto-register">
</body>
</html>

Register Popup

<html>
<head><script src="testjs.js"></script></head>
<body>

    <input id="id" type="text">
    <input id="pw" type="text">


    <input id="register" onclick="goto_register()" type="button" value="register">
</body>
</html>

JavaScript

function goto_login() {
var loginPopup  =  document.getElementById("loginPopup");
var registerPopup = document.getElementById("registerPopup");

loginPopup.style.display="block";
registerPopup.style.display="none";
}

function goto_register() {
var loginPopup  = document.getElementById("loginPopup");
var registerPopup = document.getElementById("registerPopup");

loginPopup.style.display="none";
registerPopup.style.display="block";
}

function close_pop() {
var loginPopup  = document.getElementById("loginPopup");
var registerPopup = document.getElementById("registerPopup");

loginPopup.style.display="none";
registerPopup.style.display="none";
}

I set the height to a px value, and removed the <object> tag for simplicity. My guess is there is something wrong with your object tag, I have not used it to import html the way you are trying to.

 function goto_login() { var loginPopup = document.getElementById("loginPopup"); var registerPopup = document.getElementById("registerPopup"); loginPopup.style.display = "block"; registerPopup.style.display = "none"; } function goto_register() { var loginPopup = document.getElementById("loginPopup"); var registerPopup = document.getElementById("registerPopup"); loginPopup.style.display = "none"; registerPopup.style.display = "block"; } function close_pop() { var loginPopup = document.getElementById("loginPopup"); var registerPopup = document.getElementById("registerPopup"); loginPopup.style.display = "none"; registerPopup.style.display = "none"; } 
 <button id="login" onclick="goto_login()">goto login</button> <button id="register" onclick="goto_register()">goto register</button> <div id="loginPopup" style="background-color:red; display:none;width:100%; height:300px;"> <input id="id" type="text"> <input id="pw" type="text"> <input id="login" type="button" value="login"> <input id="goto_register" onclick="goto_register()" type="button" value="goto-register"> </div> <div id="registerPopup" style="background-color: yellow; display:none;width:100%; height:300px;"> <input id="id" type="text"> <input id="pw" type="text"> <input id="register" onclick="goto_register()" type="button" value="register"> </div> 

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM