How could I change an HTML header through Javascript?

Question

Ok, let's say I have this HTML code, and I want to change the header from within the js code, how would I? I've tried several other solutions from other Q&As but they don't seem to work, either I'm brain dead or stuck. I want to change the header based on a variable, so something like:

header = variablexyz;

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        .header {
            padding: 60px;
            text-align: center;
            background: #1746c7;
            color: white;
            font-size: 50px;
        }
    </style>
</head>

<body>
    <div class="header">
        <h1>header</h1>
        <p>-randomly generated username-</p>
    </div>
    <script src="script.js"></script>
</body>

</html>

What exactly are you trying to change? The text inside the h1 tag that reads 'header', the class header, or the css rule header? And what is the variable value - different text, a new class or a new class rule? — Dave Pritlove
– Dave Pritlove, Commented Mar 24, 2022 at 2:59
I'm trying to change the text inside the h1 tag that reads "header" to a different text. — The Code Challenger
– The Code Challenger, Commented Mar 24, 2022 at 3:00

Christian Lowe · Accepted Answer · 2022-03-24 03:00:04Z

3

This quite simple let header = document.getElementById('header') header.innerHTML = "Hello"

Please assign a class name or ID to your header <h1 id="idhere">

answered Mar 24, 2022 at 3:00

Christian Lowe

373 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dave Pritlove · Accepted Answer · 2022-03-24 03:07:33Z

2

To change the text inside the h1 tag (or any element) in javascript, you first make a reference to the element. As your h1 tag has no id attribute, you instead reference a collection of all h1 elements and reference the first (only) one using an array-like index [0]. You can then sets its innerText property to the variable holding the text you want to display.

Working snippet:

let header = "some different Text";

const h1elements = document.getElementsByTagName('h1');

h1elements[0].innerText = header;

<div class="header">
        <h1>header</h1>
        <p>-randomly generated username-</p>
    </div>

answered Mar 24, 2022 at 3:07

Dave Pritlove

2,6973 gold badges17 silver badges16 bronze badges

Comments

TylerH · Accepted Answer · 2022-09-05 15:41:15Z

1

I would assign an ID to the h1 containing the header

const customHeader1 = "custom header";
const header1 = document.getElementById('header1').textContent = customHeader1;

<!DOCTYPE html>
<html lang="en">

<head>
  <style>
    .header {
      padding: 60px;
      text-align: center;
      background: #1746c7;
      color: white;
      font-size: 50px;
    }
  </style>
</head>

<head>
  <style>
    .header {
      padding: 60px;
      text-align: center;
      background: #1746c7;
      color: white;
      font-size: 50px;
    }
  </style>
</head>

<body>
  <div class="header">
    <h1 id="header1">header</h1>
    <p>-randomly generated username-</p>
  </div>
  <script src="script.js"></script>
</body>>

</html>

edited Sep 5, 2022 at 15:41

TylerH

21.3k84 gold badges84 silver badges121 bronze badges

answered Aug 5, 2022 at 3:47

ThePaulin

673 bronze badges

Comments

ThePaulin · Accepted Answer · 2022-03-24 03:28:44Z

0

To do this you have to assign your header an ID as such: in you HTML

in your JavaScript header = document.getElementById('header-id'); header.innerHTML = "HERE GOES THE CHANGE YOU WANT TO MAKE ON THE HEADER"

answered Mar 24, 2022 at 3:28

ThePaulin

673 bronze badges

1 Comment

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

How could I change an HTML header through Javascript?

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related