Javascript how to change page title with user input

Question

The thing i wanna do is when user writes something to input and sumbits it, the page will change to the input.

Example:

If user writes "Web" to the input, the page title should change to "Web"

Here's the code:

JS:

document.getElementById("titleSumbitBtn").onclick = function (){
    var newTitle = document.getElementById("newTitle").textContent;
    document.getElementById("title").innerHTML = newTitle;
}

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title id="title">Web Editor</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <center><label id="originLabel">Welcome to Web Editor!</label><br></center>
    <br><label id="changeTitleLabel">Change the title of Web: </label><br>
    <input type="text" id="newTitle"><br>
    <button type="button" id="titleSumbitBtn">Change</button>
</body>
</html>

Does this answer your question? [How to dynamically change a web page's title?](https://stackoverflow.com/questions/413439/how-to-dynamically-change-a-web-pages-title) — sschwei1, Mar 11 '22 at 14:05
So _where_ does the JS code actually get embedded into the HTML document? I don't see a single `script` element anywhere. — CBroe, Mar 11 '22 at 14:14

Ali Demirci · Accepted Answer · 2022-03-11T14:17:41.650

5

You can assign new title to the document like this:

document.getElementById("titleSumbitBtn").onclick = function (){
    var newTitle = document.getElementById("newTitle").value;
    document.title = newTitle;
}

This is actual implementation but keep in mind that it must run after the DOM element with id newTitle.

If you put your <script> tag inside <head>, you'll need DOMContentLoaded:

document.addEventListener('DOMContentLoaded', () => {
    document.getElementById("titleSumbitBtn").onclick = function (){
        var newTitle = document.getElementById("newTitle").value;
        document.title = newTitle;
    }
})

edited Mar 11 '22 at 14:17

answered Mar 11 '22 at 14:05

Ali Demirci

5,302
7
39
66

still doesn't work sadly. – William ဗ Mar 11 '22 at 14:08
it should work. i did an edit to the answer, did you tried the edited one? – Ali Demirci Mar 11 '22 at 14:09
yes, doesnt work – William ဗ Mar 11 '22 at 14:11
how do you use the javascript code in your file? script must be after the text input that you're trying to assign an onclick event, if you're not using dom content loaded event. – Ali Demirci Mar 11 '22 at 14:13
1

i forgot to put that was the reason of error. thanks for your help – William ဗ Mar 11 '22 at 14:13
Updated the answer with `DOMContentLoaded` example. Please accept the answer if it did help. – Ali Demirci Mar 11 '22 at 14:18

score 0 · Answer 2 · answered Mar 11 '22 at 14:30

0

try this:

document.getElementById("titleSumbitBtn").addEventListener("click", function (){
var newTitle = document.getElementById("newTitle").value;
document.getElementById("title").innerText = newTitle;

})

answered Mar 11 '22 at 14:30

ido ben ami

136
5

Javascript how to change page title with user input

2 Answers2

Linked