How do I get my HTML button to interact with my DOM properly?-CodePudding

I'm struggling to learn the DOM in JavaScript and figured hands-on practice would help solidify certain concepts. Unfortunately, I'm stuck on the very basics still; please bear with me. In my code, I am trying to program a button (id: tinkerHeaderButton) to change the background-color of my first header (id: headerOne) in my HTML to the color 'red', upon clicking. I can't seem to progress past programming my first button however, and I feel like there's something very obvious that I'm missing. I have looked over several very similar posts and none of them gave me much insight into what I am doing wrong. I would appreciate anyone looking over my code and pointing out whatever the very obvious flaws are.

//Header button and header variables
let tinkerHeaderButton = document.body.getElementByID("tinkerHeaderButton");
let header = document.body.getElementByID("headerOne");

//Event listener for header modifying button
tinkerHeaderButton.addEventListener("click", alterHeaderToRed);

//Function which should alter the background color of the first header in my HTML to the color 'red'
const alterHeaderToRed = () => {
    header.style.backgroundColor = 'red';
};

body {
    background-image: radial-gradient( circle 610px at 5.2% 51.6%,  rgba(5,8,114,1) 0%, rgba(7,3,53,1) 97.5% );
}

h1 {
    text-align: center;
    font-family: 'Supermercado One', cursive;
    color: white;
    font-size: 40px;
    font-weight: bold;
}

h2 {
    text-align: center;
    color: white;
    font-family: 'Marko One', serif;
    font-weight: bold;
    font-size: x-large;
}

.header {
    background-color: rgb(20, 27, 27);
    padding-top: 20px;
    padding-bottom: 30px;
    margin-top: 100px;
    margin-left: 20px;
    margin-right: 20px;
    opacity: 0.9;
    border: 3px solid lightcoral;
}

.headerTwo {
    background-color: black;
    opacity: 0.9;
    padding-top: 20px;
    padding-bottom: 30px;
    margin-left: 20px;
    margin-right: 20px;
    border: 3px solid lightcoral;
}

.buttons {
    border: 3px solid black;
    border-radius: 10px;
    padding: 10px;
    background-color: lightcoral;
    font-size: medium;
    color: black;
    margin-top: 20px;
    font-family: 'Orbitron', sans-serif;
    display: inline-block;
    z-index: 10;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <title>| DOM Tinkering Grounds |</title>
    <link rel="stylesheet" href="DOM.css">
    <script src="DOM.js" async></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Marko One&family=Orbitron&family=Supermercado One&display=swap" rel="stylesheet">
</head>
<body>
    <div  id="headerOne"> <!-- This is the header that I wish to modify -->
        <h1>DOM Tinkering Grounds</h1>
    </div>
    <div  id="secondHeader">
        <h2>Tinkering Awaits!</h2>
    </div>
    <div >
        <center><button  id="tinkerHeaderButton">Tinker Header</button> <!--This is the button which should modify the header background color to 'red'-->
        <button  id="tinkerContentButton">Tinker Content</button>
        <button  id="tinkerButtonsButton">Tinker Buttons</button></center>
    </div>
</body>
</html>

CodePudding user response：

I detected two errors:

Incorrect typing of document.getElementById() method.
Trying to use alterHeaderToRed() method before defining it.

/* I updated the method below to be document.getElementById() . */
let tinkerHeaderButton = document.getElementById("tinkerHeaderButton");
let header = document.getElementById("headerOne");

/* I defined the method below before using it. */
const alterHeaderToRed = () => {
    header.style.backgroundColor = 'red';
    console.log("The click event of the <button> element whose id attribute is 'tinkerHeaderButton' is fired.");
};

tinkerHeaderButton.addEventListener("click", alterHeaderToRed);

body {
    background-image: radial-gradient( circle 610px at 5.2% 51.6%,  rgba(5,8,114,1) 0%, rgba(7,3,53,1) 97.5% );
}
h1 {
    text-align: center;
    font-family: 'Supermercado One', cursive;
    color: white;
    font-size: 40px;
    font-weight: bold;
}
h2 {
    text-align: center;
    color: white;
    font-family: 'Marko One', serif;
    font-weight: bold;
    font-size: x-large;
}
.header {
    background-color: rgb(20, 27, 27);
    padding-top: 20px;
    padding-bottom: 30px;
    margin-top: 100px;
    margin-left: 20px;
    margin-right: 20px;
    opacity: 0.9;
    border: 3px solid lightcoral;
}

.headerTwo {
    background-color: black;
    opacity: 0.9;
    padding-top: 20px;
    padding-bottom: 30px;
    margin-left: 20px;
    margin-right: 20px;
    border: 3px solid lightcoral;
}
.buttons {
    border: 3px solid black;
    border-radius: 10px;
    padding: 10px;
    background-color: lightcoral;
    font-size: medium;
    color: black;
    margin-top: 20px;
    font-family: 'Orbitron', sans-serif;
    display: inline-block;
    z-index: 10;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <title>| DOM Tinkering Grounds |</title>
    <link rel="stylesheet" href="DOM.css">
    <script src="DOM.js" async></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Marko One&family=Orbitron&family=Supermercado One&display=swap" rel="stylesheet">
</head>
<body>
    <div  id="headerOne"> <!-- This is the header that I wish to modify -->
        <h1>DOM Tinkering Grounds</h1>
    </div>
    <div  id="secondHeader">
        <h2>Tinkering Awaits!</h2>
    </div>
    <div >
        <center><button  id="tinkerHeaderButton">Tinker Header</button> <!--This is the button which should modify the header background color to 'red'-->
        <button  id="tinkerContentButton">Tinker Content</button>
        <button  id="tinkerButtonsButton">Tinker Buttons</button></center>
    </div>
</body>
</html>

CodePudding user response：

document.body.getElementByID is incorrect just use document.body.getElementById and try to use intelligent IDE to help you Like Visual studio code

CodePudding user response：

You have two issues with your code. They are listed below.

`document.getElementById` spelt incorrectly

Instead of document.body.getElementByID, you need to use document.getElementById.

If you use Visual Studio Code, then it should help you with what variables or methods exist.

Function declared after use

The code written also has another issue, which is that you are using a function before it is declared.

Refactored Code

The refactored code should look like below. You can paste this into your JavaScript file.

// Updated both methods to use document.getElementById()
const tinkerHeaderButton = document.getElementById("tinkerHeaderButton");
const header = document.getElementById("headerOne");

// Defined the method before use!
const alterHeaderToRed = () => {
    header.style.backgroundColor = "red";
    console.log("The click event of the <button> element whose ID attribute is 'tinkerHeaderButton' is fired!");
};

tinkerHeaderButton.addEventListener("click", alterHeaderToRed);

Note: Don't run the snippet above! It will throw an error!

Hopefully, this helped with your issue!

document.getElementById spelt incorrectly

Function declared after use

Refactored Code

`document.getElementById` spelt incorrectly