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 |
0 Comments