This page describes how to fetch page title using javascript. In this code, when we click on a button on the webpage, the page title is displayed. It is a nice way to display your page title on your webpage using javascript.
HTML, CSS, JavaScript:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Task 3</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500&display=swap"> <style> body { font-family: "Poppins", sans-serif; text-align: center; background-color: #f7f7f7; padding: 20px; } .container { max-width: 400px; margin: 40px auto; padding: 20px; background-color: #fff; border: 1px solid #ddd; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); border-radius: 10px; } .button { background-color: #4CAF50; color: #fff; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; } .button:hover { background-color: #3e8e41; } #title-container { margin-top: 20px; font-size: 24px; font-weight: bold; } </style> </head> <body> <div class="container"> <h1>Page Title Fetcher</h1> <button class="button" id="fetch-button">What is the Page Title?</button> <div id="title-container"></div> </div> <script> const fetchButton = document.getElementById('fetch-button'); const titleContainer = document.getElementById('title-container'); fetchButton.addEventListener('click', () => { const pageTitle = document.title; titleContainer.innerHTML = `The page title is: <span style="color: blue">${pageTitle}</span>`; }); </script> </body> </html>
In this code internal CSS is used and it can be changed according to liking.
Steps:
- As the main task is to display a page title, provide a title to your webpage.
- Decide how the webpage will look.
- In the <body> create a container that will contain a heading, a button and will also display the page title upon clicking of the button.
<div class="container"> <h1>Page Title Fetcher</h1> <button class="button" id="fetch-button">What is the Page Title?</button> <div id="title-container"></div> </div>
- Provide an ID to the button and the division of output.
- Now, in the javascript, get the button and output dividon by ID.
const fetchButton = document.getElementById('fetch-button'); const titleContainer = document.getElementById('title-container');
- Create an event listener function for button click. Inside that fetch the page title using ‘document.title’ and then display it using ‘innerHTML’.
fetchButton.addEventListener('click', () => { const pageTitle = document.title; titleContainer.innerHTML = `The page title is: <span style="color: blue">${pageTitle}</span>`; });
- You can also change the colour of the page title so that it stands out. Here I have applied blue colour to the page title when it is displayed. However, any other styles can also be applied to make the text stand out.
Output:
Here is how the page looks.
To see how it works click on the link. Fetch page title.