如何使用 javascript 添加带有消息的 h1 标头（下面的代码是 2023 年新年倒数计时器）。请指出我的错误答案

【问题标题】：How to add a h1 header with a message using javascript ( The code below is a new year 2023 countdown timer). Point out my error please如何使用 javascript 添加带有消息的 h1 标头（下面的代码是 2023 年新年倒数计时器）。请指出我的错误
【发布时间】：2026-01-17 12:20:06
【问题描述】：

当倒计时结束时，我想让 h1[1] 和 h1[2] 标题可见并隐藏 h1[0] 隐藏。我在 javasript 代码段中以下面给出的方式进行了操作，但 h1[1] 和 h1[2] 不可见。请有人指出我的错误以及如何解决？

JAVASCRIPT

document.body.querySelector("h1").textContent = "HAPPY NEW YEAR";
document.body.getElementsByTagName("h1")[1].style.display = inline; //Not working
document.body.getElementsByTagName("h1")[2].style.display = inline; //Not working

HTML

<body>
    <h1>New Year Countdown</h1>
    <h1 style="display:none">HAPPY NEW YEAR</h1>
    <br>
    <h1 style="display:none">WELCOME 2023!</h1>
    <div class=" container" id="countdown">
        <div class=" row" id="time">
            <div class="col" id="days">
                <h2>00</h2>
                <h6>DAYS</h6>
            </div>
            <div class="col" id="hours">
                <h2>00</h2>
                <h6>HOURS</h6>
            </div>
            <div class="col" id="minutes">
                <h2>00</h2>
                <h6>MINUTES</h6>
            </div>
            <div class="col" id="seconds">
                <h2>00</h2>
                <h6>SECONDS</h6>
            </div>
        </div>
    </div>
    <script src="source.js"></script>
</body>

【问题讨论】：

以错字结尾：inline 应该是字符串"inline"。有时它只是有助于打开开发者工具控制台并读出错误消息。

标签： javascript html dom frontend

【解决方案1】：

您可以将ID 添加到您的H1 并使用getElementsById('h1-id')

然后更新visibility: hidden css 样式属性。

【讨论】：

谢谢！我明白了

【解决方案2】：

我了解您面临的问题。首先尝试删除您在 html 文件中应用的内联 css 并将其转移到 html 文档的 <header></header> 部分内的 <style></style>，我们这样做是因为提供了内联 css 更重要比您在文档中注入的其他形式的样式。

html

<h1 class="headers" id="new_year_cntdwn">New Year Countdown</h1>
<h1 class="headers">HAPPY NEW YEAR</h1>
<br>
<h1 class="headers">WELCOME 2023!</h1>

添加css

.headers{
        display: none;
    }
    #new_year_cntdwn{
        display: inline;
    }

对于 JavaScript 部分，在删除内联 css 后尝试使用它

这里我们遍历数组（这里是被选中的头数组）如果您想了解有关querySelectorAll 或forEach 方法的更多信息，请尝试参考https://developer.mozilla.org/en-US/

document.querySelectorAll(".headers").forEach(header=>header.style.display="block")
document.querySelector("#new_year_cntdwn").style.display="none"

【讨论】：

如果你创建一个变量或常量来存储const obj1 = document.querySelectorAll(".headers")传递的数据会更好，这样你只需要调用obj并做你想做的事。
非常感谢。您很好地解释了这种方法。