How could I change an HTML header through Javascript?-CodePudding

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 >
        <h1>header</h1>
        <p>-randomly generated username-</p>
    </div>
    <script src="script.js"></script>
</body>

</html>

CodePudding user response：

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

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

CodePudding user response：

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 >
        <h1>header</h1>
        <p>-randomly generated username-</p>
    </div>

CodePudding user response：

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"