Modify the title of a browser tab with Javascript

Asked

Viewed 2,057 times

1

<!DOCTYPE html>
<html>
    <head>
        <title>Esconder titulos</title>
        <script type="text/javascript" src="script.js"></script>
    </head>
    <body>
        <input type="text" name="texto" id="texto">
        <button id="btn">Aplicar T�tulo</button>
    </body>
</html>

I have an extension that receives a text and through an input and would like to apply it in the open tab of the browser, replacing the original title. 

  

  document.addEventListener('DOMContentLoaded', function() {
    document.querySelector('#btn').addEventListener('click', function() {
        let text = document.querySelector('#texto').value;
    });
});

What would be the command to do this?

inserir a descrição da imagem aqui

javascript

  • You could include HTML in your question?

6 answers

4

Use the document.title. Remembering that will change the tag title in the GIFT also.

document.title = "Novo título"

1

Try it that way:

document.getElementsByTagName("title")[0].innerText = 'titulo';

0

My solution to this problem is a little different.

In HTML:

<input type="text" name="texto" id="texto">
<button onclick="altTitle()">botãotitle</button>

Already in the script.js file:

function altTitle(){
    input = document.getElementById("texto").value;
    document.title = input; 
};

0

To "pick up" the content of the input you can use:

var entrada = document.getElementsByTagName('input')[0].value;

And to assign the value collected in the input to the title of the page you can use:

document.getElementsByTagName('title')[0].innerHTML=entrada;

Assigning an ID("#btn") to the HTML button element you can have the javascript below:

document.querySelector('#btn').addEventListener('click', function(){
  var entrada = document.getElementsByTagName('input')[0].value;
  document.getElementsByTagName('title')[0].innerHTML=entrada;      
})

0

Create a variable to store the input, then put it as a variable tag "title"

var input = document.getElementById("texto").value;

document.getElementsByTagName('title')[0].innerHTML = input;
/*Peguei a tag "title" e coloquei como "innerHTML" a variável input
onde foi armazenado o valor do input*/

0

To manipulate a page you use the property document.title. To modify you only need to assign a new value to this property as follows: document.title = text;

Code with solution.

document.addEventListener('DOMContentLoaded', function() {
    document.querySelector('#btn').addEventListener('click', function() {
        let text = document.querySelector('#texto').value;
        document.title = text;
    });
});

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.