Change tab title with script, how do you do?

Question

I want to appear only the name of the product without the name of the site, as I use a platform ready not to edit the tag <title>, so I need to use a script to do this.

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

---

When I put the script appears "Undefined" in the tab

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

this is what’s in html

<div class="nomeDescricaoProduto">

<h1> Nome do Produto </h1>

</div>

Answer 1

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

Fur-picking querySelector

You can use a query to get the <h1> which is within any element possessing the class nomeDescricaoProduto:

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

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

So if you wish, you can use the getElementsByClassName.

Fur-picking getElementsByClassName

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

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

In both cases, if you want, you can run the method trim to remove all whitespace (perhaps unnecessary) 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’ve helped!

Answer 2

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

document.title = document.getElementById('produto').innerText;

Answer 3

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

So that way you should take the amount by document.getElementsByClassName('nomeDescricaoProduto')[0].innerText;

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

So I feel that you are doing it wrong, in the context of what you want to do, I believe that actually it should be the id and not the class, because the id is unique and does not repeat itself, so I would use:

document.getElementById('nomeDescricaoProduto').innerText;