CODEWITHSUNDEEP
javascripthtmlcss
Pickl Pilot
Pickl Pilot

Reputation: 75

How to make button for a different page?

So I have a template from Geeks for Geeks where the entire page is replaced with the click of a button (Link: https://www.geeksforgeeks.org/how-to-replace-the-entire-html-node-using-javascript/). I want to have a second button that changes the page to some different text. I have tried duplicating the JS and HTML to a different page, but it disables the buttons. Thanks!

<!DOCTYPE HTML>
<html>
  
<head>
    <title>
       Replace the entire HTML node using JavaScript.
    </title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
    </script>
    <style>
        #div {
            background: green;
            height: 100px;
            width: 200px;
            margin: 0 auto;
            color: white;
        }
    </style>
</head>
  
<body style="text-align:center;">
    <h1 style="color:green;">  
            GeeksForGeeks  
        </h1>
    <p id="GFG_UP">
    </p>
    <button onclick="GFG_Fun();">
        click here
    </button>
    <p id="GFG_DOWN" style="color: green;">
    </p>
    <script>
        var up = document.getElementById('GFG_UP');
        var down = document.getElementById('GFG_DOWN');
        up.innerHTML = "Click on the button to replace the entire HTML element.";
  
        function GFG_Fun() {
            var Str = 
                '<!DOCTYPE HTML><html><head><title>Check if an element is a div'+
                ' in JavaScript.</title></head><body style = "text-align:center;">'+
                '<h2 style = "color:green;">GeeksForGeeks</h2><p>'+
                'This is replaced element.</p></body>  </html>';
            var newHTML = document.open("text/html", "replace");
            newHTML.write(Str);
            newHTML.close();
        }
    </script>
</body>
  
</html>

Upvotes: 1

Views: 134

Answers (1)

Pickl Pilot
Pickl Pilot

Reputation: 75

This is an answer to my previous question. What you can do if you encounter this problem is to duplicate the function GFG_Fun() (naming it something else, of course) and then making a second button with the duplicated function. Here's a code snippet as an example:

<!DOCTYPE HTML>
<html>
  
<head>
    <title>
       Replace the entire HTML node using JavaScript.
    </title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
    </script>
    <style>
        #div {
            background: green;
            height: 100px;
            width: 200px;
            margin: 0 auto;
            color: white;
        }
    </style>
</head>
  
<body style="text-align:center;">
    <h1 style="color:green;">  
            GeeksForGeeks  
        </h1>
    <p id="GFG_UP">
    </p>
    <button onclick="GFG_Fun();">
        click here
    </button>
    <button onclick="GFG_Fun2();">
      click here too
    </button> 
    <p id="GFG_DOWN" style="color: green;">
    </p>
    <script>
        var up = document.getElementById('GFG_UP');
        var down = document.getElementById('GFG_DOWN');
        up.innerHTML = "Click on the button to replace the entire HTML element.";
  
        function GFG_Fun() {
            var Str = 
                '<!DOCTYPE HTML><html><head><title>Check if an element is a div'+
                ' in JavaScript.</title></head><body style = "text-align:center;">'+
                '<h2 style = "color:green;">GeeksForGeeks</h2><p>'+
                'This is replaced element.</p></body>  </html>';
            var newHTML = document.open("text/html", "replace");
            newHTML.write(Str);
            newHTML.close();
        }
        function GFG_Fun2() {
            var Str = 
                '<!DOCTYPE HTML><html><head><title>Check if an element is a div'+
                ' in JavaScript.</title></head><body style = "text-align:center;">'+
                '<h2 style = "color:green;">HI!</h2><p>'+
                'This is replaced element.</p></body>  </html>';
            var newHTML = document.open("text/html", "replace");
            newHTML.write(Str);
            newHTML.close();
        }
    </script>
</body>
  
</html>

Upvotes: 1

Related Questions