Change tab title with script, how do? [closed]

-2

I want to show only the product name without the site name, since I use a pre-ready platform, I can not edit the <title> tag, so I need to use a script to do this.

At the moment it appears in the browser tab "Site Name - Product Name", I want to put the site name at the end or even remove it and leave only the name of the product that is in the "h1" tag

When I put the script appears "undefined" in the

document.title = document.getElementsByClassName('nomeDescricaoProduto').innerText;

this is what you have in html

<div class="nomeDescricaoProduto">

<h1> Nome do Produto </h1>

</div>
    
asked by anonymous 22.12.2018 / 01:15

3 answers

2

You can get the product name in two ways: by querySelector , or by getElementsByClassName itself (which you have already tried to use).

Catching querySelector

You can use a query to get the <h1> that is inside any element that has the class nomeDescricaoProduto :

document.title = document.querySelector('.nomeDescricaoProduto h1').innerText;

However, querySelector of JavaScript only returns the first element it finds, that is, it does not return a list, and therefore, would not be appropriate if it had more descriptions to be captured.

So if you want, you can use getElementsByClassName .

Catching getElementsByClassName

You can also do it the way you have already put it (in response). In your case, it was returning undefined because you were trying to get the (non-existent) innerText property of a NodeList , that is, a list of nodes . So if this div is the only one with this class, you can do this:

document.title = document.getElementsByClassName('nomeDescricaoProduto')[0].innerText;

In both cases, if you want, you can execute the trim method to remove all (perhaps unnecessary) white space from the front and back of the string:

document.title = document.querySelector('.nomeDescricaoProduto h1').innerText.trim();

Or

document.title = document.getElementsByClassName('nomeDescricaoProduto')[0].innerText.trim();

I hope I have helped!

    
22.12.2018 / 15:15
0

Hello, You can change the title of the page by assigning a new value to the document.title , and to get the text inside the <h1> just get the innerText property, as follows:

document.title = document.getElementById('produto').innerText;
    
22.12.2018 / 03:20
0

You are getting an array of classes with getElementsByClassName which is normal, since there may be more than one class with the same name, so this returns an array of classes, since classes are used to repeat styles / codes for other elements.

So this way you should get the value for document.getElementsByClassName('nomeDescricaoProduto')[0].innerText;

and position 0 only if the div with the class were the first. If there is more than one div with the same class, you should see what the order is, then put the position.

So I feel like you're doing it the wrong way, because of the context of what you want to do, I think it should actually be the id rather than the class, because the id is unique and does not repeat itself, p>

document.getElementById('nomeDescricaoProduto').innerText;
    
25.12.2018 / 13:14