CODEWITHSUNDEEP
javascripthtml
The Code Challenger
The Code Challenger

Reputation: 82

How could I change an HTML header through Javascript?

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>

Upvotes: 2

Views: 4388

Answers (4)

ThePaulin
ThePaulin

Reputation: 67

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>

Upvotes: 1

ThePaulin
ThePaulin

Reputation: 67

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"

Upvotes: 0

Dave Pritlove
Dave Pritlove

Reputation: 2687

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>

Upvotes: 2

Christian Lowe
Christian Lowe

Reputation: 37

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

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

Upvotes: 2

Related Questions