如何让我的 HTML 按钮与我的 DOM 正确交互？答案

【问题标题】：How do I get my HTML button to interact with my DOM properly?如何让我的 HTML 按钮与我的 DOM 正确交互？
【发布时间】：2022-04-11 13:53:24
【问题描述】：

我正在努力学习 JavaScript 中的 DOM，并且认为动手实践将有助于巩固某些概念。不幸的是，我仍然停留在最基本的东西上。请多多包涵。在我的代码中，我正在尝试编写一个按钮（id：tinkerHeaderButton），以便在单击时将我的 HTML 中的第一个标题（id：headerOne）的背景颜色更改为“红色”。然而，我似乎无法超越编程我的第一个按钮，而且我觉得我缺少一些非常明显的东西。我查看了几篇非常相似的帖子，但没有一篇让我深入了解我做错了什么。如果有人查看我的代码并指出任何非常明显的缺陷，我将不胜感激。

//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 class="header" id="headerOne"> <!-- This is the header that I wish to modify -->
        <h1>DOM Tinkering Grounds</h1>
    </div>
    <div class="headerTwo" id="secondHeader">
        <h2>Tinkering Awaits!</h2>
    </div>
    <div class="contents">
        <center><button class="buttons" id="tinkerHeaderButton">Tinker Header</button> <!--This is the button which should modify the header background color to 'red'-->
        <button class="buttons" id="tinkerContentButton">Tinker Content</button>
        <button class="buttons" id="tinkerButtonsButton">Tinker Buttons</button></center>
    </div>
</body>
</html>

【问题讨论】：

标签： javascript html css dom dom-events

【解决方案1】：

我检测到两个错误：

document.getElementById() 方法输入错误。
在定义之前尝试使用alterHeaderToRed() 方法。

/* 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 class="header" id="headerOne"> <!-- This is the header that I wish to modify -->
        <h1>DOM Tinkering Grounds</h1>
    </div>
    <div class="headerTwo" id="secondHeader">
        <h2>Tinkering Awaits!</h2>
    </div>
    <div class="contents">
        <center><button class="buttons" id="tinkerHeaderButton">Tinker Header</button> <!--This is the button which should modify the header background color to 'red'-->
        <button class="buttons" id="tinkerContentButton">Tinker Content</button>
        <button class="buttons" id="tinkerButtonsButton">Tinker Buttons</button></center>
    </div>
</body>
</html>

【讨论】：

啊，我知道解决方案很明显。谢谢你结束了我的沮丧！

【解决方案2】：

document.body.getElementByID 不正确只需使用document.body.getElementById 并尝试使用智能 IDE 帮助您喜欢 Visual Studio 代码

【讨论】：

【解决方案3】：

您的代码有两个问题。它们在下面列出。

您需要使用document.getElementById，而不是document.body.getElementByID。

如果您使用智能 IDE，那么它应该可以帮助您了解存在哪些变量或方法。

写的代码还有一个问题，就是你在声明之前使用了一个函数。

重构后的代码应如下所示。您可以将其粘贴到您的 JavaScript 文件中。

// 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);

希望这对您的问题有所帮助！

【讨论】：