Header Ads Widget

Responsive Advertisement

Dynamically Change the Title of an HTML Page

Dynamically changing the title of an HTML page is useful for enhancing user experience, SEO optimization, and providing contextual information. You can use JavaScript along with the History API to modify the title based on user actions, such as navigation or calculations.


1. Basic Example: Change Title Dynamically

html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Original Title</title>

</head>

<body>

 

    <h1>Dynamic Title Change Example</h1>

    <button onclick="changeTitle('New Title 1')">Change to Title 1</button>

    <button onclick="changeTitle('New Title 2')">Change to Title 2</button>

 

    <script>

        function changeTitle(newTitle) {

            document.title = newTitle; // Change the title

            history.pushState(null, newTitle, window.location.href); // Update browser history

        }

    </script>

 

</body>

</html>

 

Explanation:

document.title = newTitle; → Modifies the page title dynamically.

history.pushState(null, newTitle, window.location.href); → Modifies browser history without reloading the page.


2. Changing Title Based on Math Calculations

You can change the title dynamically based on user input or mathematical calculations.

Example: Calculate and Display Sum in Title

html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Calculator</title>

</head>

<body>

 

    <h1>Math-Based Title Change</h1>

    <input type="number" id="num1" placeholder="Enter first number">

    <input type="number" id="num2" placeholder="Enter second number">

    <button onclick="calculateSum()">Calculate Sum</button>

 

    <script>

        function calculateSum() {

            let num1 = parseInt(document.getElementById("num1").value);

            let num2 = parseInt(document.getElementById("num2").value);

            let sum = num1 + num2;

 

            document.title = `Sum: ${sum}`; // Update title with sum

            history.pushState(null, `Sum: ${sum}`, `?sum=${sum}`); // Update URL

        }

    </script>

 

</body>

</html>

 

Explanation:

Takes user input, calculates the sum, and updates the title dynamically.

document.title = Sum: ${sum}; → Displays the sum result in the title.

history.pushState(null, "Sum: " + sum, "?sum=" + sum); → Updates the URL dynamically.


3. Restoring Title Using popstate

To handle browser back/forward actions, use window.onpopstate.

html

<script>

    window.onpopstate = function(event) {

        document.title = "Original Title"; // Restore title when user goes back

    };

</script>

 


4. Changing Title Based on form submit

This is an easy method to dynamically alter the title of a browser window or an HTML page. There are various situations in which this functionality can be utilized to convey valuable information to the user.

 

<HTML>

<HEAD><TITLE>Change Title Dynamically:</TITLE></HEAD>

<BODY>

<FORM action="" method=POST name="dynamicForm">

<B>Enter Title for the window:</B>

<input type="text" name="headerTitle">

<INPUT TYPE=BUTTON VALUE="Change Title" onclick="javascript:updateTitle()">

</FORM>

<SCRIPT LANGUAGE="JAVASCRIPT">

function updateTitle()

{

 document.title = document.dynamicForm.headerTitle.value;

}

</SCRIPT>

</BODY>

</HTML>

 


Use Cases

Real-time updates (e.g., showing live scores in the title).
E-commerce (e.g., displaying the number of items in the cart).
SEO Optimization (e.g., dynamically updating product pages).
Calculators (e.g., financial, mathematical, health calculations).


Mathematical Justification for Dynamic Titles

The title dynamically represents changing numerical values based on calculations.

The sum calculation (num1 + num2) is an example of a commutative operation.

Using history.pushState(), we map function outputs (math results) to browser states dynamically.


Conclusion

Dynamically updating the title and history improves user engagement, UX, and interaction with mathematical operations or calculations.

 

dynamic html title change
dynamic html title change




Post a Comment

0 Comments