Question 44819 in Html Question posted in
Some basic documentation can be found here.

Make auto titles on html using JS

The code below makes the first step: add an image with a link to the home-page and an h1 with the name of the document, if there isn’t an h1 already.

I used an html that references a JavaScript file in the <head> and has a <h1> tag for the title (this is one of the expectations that I want to make this because of the special characters).

document.write('<a href="rpg.html"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/U%2B2190.svg/25px-U%2B2190.svg.png"></a><br>');

if (document.getElementById(titulo) != null) /*se existir um não titulo... */ {
  var nome_do_documento = window.location.href.substring(window.location.href.lastIndexOf('/') + 1); /*colete o nome do documento */
  var titulo = nome_do_documento.replace('_', ' '); /*troque _ por um espaço */
  var titulo_pronto = titulo.replace('.html', ''); /*apague a extenção do nome */
  document.write('<h1 id="titulo">' + titulo_pronto + '</h1>');
}; /*e o nome no topo da pagina */

document.title = "PVP - " + document.getElementById(titulo).innerText; /*coloque o nome do topo da gina como titulo do html */
<h1 id="titulo">kauã</h1>

I expected these steps:

  1. check if there’s already a h1 with the id of "titulo"; if not then get the document name, remove the extension name and replace "_" with " " and add this to the <h1 id="titulo">. If yes, do nothing.
  2. write the inner-text of <h1 id="titulo"> in the <title> tag.

I got this result:

The console says this:

Tags:

2

Answers


  1. 0

    When looking for an element by ID, be sure to send it as a string:

    document.write('<a href="rpg.html"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/U%2B2190.svg/25px-U%2B2190.svg.png"></a><br>');

/*se existir um não titulo... */
if (document.getElementById("titulo") != null )
{
  var nome_do_documento = window.location.href.substring(window.location.href.lastIndexOf('/')+1); 

  /*colete o nome do documento */
  var titulo = nome_do_documento.replace('_',' ');

  /*troque _ por um espaço */
  var titulo_pronto = titulo.replace('.html','');

  /*apague a extenção do nome */
  document.write('<h1 id="titulo">'+ titulo_pronto +'</h1>');
};

/*e o nome no topo da pagina */
document.title = "PVP - " + document.getElementById("titulo").innerText;

/*coloque o nome do topo da gina como titulo do html */

    In your example the quotes are missing, which is treated as a variable named titulo (likely to be undefined the first time getElementById() is called, then set to nome_do_documento.replace('_',' ') the second time).

    Login or Signup to reply.
  2. 0

    In your code you have wrong condition in if statement. Change != to ==, surround id string inside getElementById with quotes and the error will be solved.

    If you want, this is my quick refactor of your code.

    (() => {
    document.write('<a href="rpg.html"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/U%2B2190.svg/25px-U%2B2190.svg.png"></a><br>');

    let headline = document.querySelector('#titulo');
    let title = '';

    if (!headline) {

        const url = window.location.pathname;
        const fileName = url.substring(url.lastIndexOf('/') + 1);
        
        title = fileName.replace(/.w+$/gi, '').replace('_', ' ');

        headline = document.createElement('h1');
        headline.textContent = title;
        document.body.appendChild(headline);

    } else
        title = headline.textContent;

    document.title = 'PVP - ' + title;
})();
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search