Proceed to the following page without utilizing identical labels as the home page

Question

Proceed to the following page without utilizing identical labels as the home page

As I work on coding a JavaScript function for my webpage, I am faced with the challenge of navigating to different pages without duplicating code. The "index.html" page contains all the necessary tags like html, head, title, and body, but I want to avoid redundancy when creating additional pages such as About, Contact, and Gallery.

Each new page should only include:

Bla bla bla

some other tags with text, photos etc

Is it possible to write JavaScript code that changes the content within the tags without repeating the entire document's code on every page?

I prefer using Chrome as my default browser and sticking to HTML and JavaScript (no PHP).

Thank you.

javascript jquery html css document-body

Answer 1

Answer №1

Utilize this function to resolve your issue by simply passing the ID of the div where you want to display the contents of a page with an index layout. In my demonstration, I am loading the content into a container div.

/**
     * Load page into url
     *
     * @param url           The url to load
     * @param onleave       The function to call before leaving
     * @param onenter       The function to call after loading
     */
function loadPage(url, onleave, onenter) 

{
    alert(url);
    console.log("loadPage("+url+")");

    // If onleave function specified
    if (onleave) {
        onleave();
    }

    var xmlhttp = new XMLHttpRequest();

    // Callback function when XMLHttpRequest is ready
    xmlhttp.onreadystatechange=function(){
        if(xmlhttp.readyState === 4){
            if (xmlhttp.status === 200) {
                console.log("Received content"+xmlhttp.responseText);
                document.getElementById('container').innerHTML = xmlhttp.responseText;

                // If onenter function specified
                if (onenter) {
                    onenter();
                }
            }
            else {
                document.getElementById('container').innerHTML = "Error loading page " + url;
            }
        }
    };
    xmlhttp.open("GET", url , true);
    xmlhttp.send();
    return;
}

Answer 2

Utilize this function to resolve your issue by simply passing the ID of the div where you want to display the contents of a page with an index layout. In my demonstration, I am loading the content into a container div.

/**
     * Load page into url
     *
     * @param url           The url to load
     * @param onleave       The function to call before leaving
     * @param onenter       The function to call after loading
     */
function loadPage(url, onleave, onenter) 

{
    alert(url);
    console.log("loadPage("+url+")");

    // If onleave function specified
    if (onleave) {
        onleave();
    }

    var xmlhttp = new XMLHttpRequest();

    // Callback function when XMLHttpRequest is ready
    xmlhttp.onreadystatechange=function(){
        if(xmlhttp.readyState === 4){
            if (xmlhttp.status === 200) {
                console.log("Received content"+xmlhttp.responseText);
                document.getElementById('container').innerHTML = xmlhttp.responseText;

                // If onenter function specified
                if (onenter) {
                    onenter();
                }
            }
            else {
                document.getElementById('container').innerHTML = "Error loading page " + url;
            }
        }
    };
    xmlhttp.open("GET", url , true);
    xmlhttp.send();
    return;
}

Answer 3

Answer №2

Here's a suggestion to improve your website:

<!DOCTYPE html>
<html>
<head>
<script type="application/javascript">
function menuClicked(menu) {
    if (menu === "About") {
        var aboutMenu = document.getElementById("menuButton_1");
        aboutMenu.innerHTML = "Include relevant information about the About section here";
    } else if (menu === "Contact") {
        // Add functionality for Contact section
    } else if (menu === "Gallery") {
        // Implement Gallery section
    }
}
</script>
</head>    
<body>
<div id="menuButton_1" onclick="menuClicked('About')">
</div>
<div id="menuButton_2" onclick="menuClicked('Contact')">
</div>
<div id="menuButton_3" onclick="menuClicked('Gallery')">
</div>
</body>
</html>

You can utilize an "onclick" function to trigger actions when users click on menu buttons. By determining which button was clicked, you can dynamically update specific content elements on the webpage using JavaScript.

To modify multiple elements simultaneously, create additional variables in your script and target each element's ID to adjust their innerHTML individually based on user interactions.

Answer 4

Here's a suggestion to improve your website:

<!DOCTYPE html>
<html>
<head>
<script type="application/javascript">
function menuClicked(menu) {
    if (menu === "About") {
        var aboutMenu = document.getElementById("menuButton_1");
        aboutMenu.innerHTML = "Include relevant information about the About section here";
    } else if (menu === "Contact") {
        // Add functionality for Contact section
    } else if (menu === "Gallery") {
        // Implement Gallery section
    }
}
</script>
</head>    
<body>
<div id="menuButton_1" onclick="menuClicked('About')">
</div>
<div id="menuButton_2" onclick="menuClicked('Contact')">
</div>
<div id="menuButton_3" onclick="menuClicked('Gallery')">
</div>
</body>
</html>

You can utilize an "onclick" function to trigger actions when users click on menu buttons. By determining which button was clicked, you can dynamically update specific content elements on the webpage using JavaScript.

To modify multiple elements simultaneously, create additional variables in your script and target each element's ID to adjust their innerHTML individually based on user interactions.

Proceed to the following page without utilizing identical labels as the home page

Answer №1

Answer №2

Similar questions

Modify the values within two arrays in JavaScript

extracting a characteristic from one entity and transferring it to another entity

Using Javascript to replace elements with input fields and text areas

The data event request in express using nodeJS is experiencing difficulties

Developing Wordpress plugins involving images - path not found

How can I capture a Django "GET" event within a template using jQuery?

Ways to duplicate ui-sref

What is the process for restarting the timer within a timer controlled by the react-countdown component?

Set the CSS/HTML to make two child elements occupy 50% of the height of the parent container div

Maintain the appearance of the text without the use of HTML tags

The execution of JSON.parse is rendered inactive

Issue with Selenium's send_keys() function sending an incomplete string

Is it possible for an AngularJS directive to compile a fresh element that has a second directive assigned to it?

Implementing React hooks to efficiently remove multiple items from an array and update the state

Unable to locate the image file path in React.js

Enhance the appearance of div elements in GWT/HTML with custom styling

The powerful trio of Django, jQuery, and Ajax working together efficiently

Experiment with express router using mocha testing framework

How do I retrieve an index value from an array in GraphQL?

Are there any jQuery plugins available for creating a currency input field specifically for the United States Dollar?