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>
This quite simple let header = document.getElementById('header') header.innerHTML = "Hello"
Please assign a class name or ID to your header <h1 id="idhere">
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>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"