html 为什么当我点击关闭按钮时，我的新闻栏没有隐藏？[duplicate]

fiei3ece 于 2022-12-16 发布在其他

关注(0)|答案(4)|浏览(139)

此问题在此处已有答案：

Why does jQuery or a DOM method such as getElementById not find the element?（6个答案）
11小时前关门了。

const closeButton = document.getElementById('close-button');

// Listen for a click event on the close button
closeButton.addEventListener('click', () => {
    const newsBar = document.getElementById('news-bar');

    // Set the display of the news bar to "none" to hide it
    newsBar.style.display = 'none';
});

#news-bar {
    background-color: rgb(255, 221, 0);
    margin-top: -1em;
    display: block;

}

.news-message {
    display: inline-grid;

    margin: auto;
    margin-top: 1.3em;
    margin-bottom: 0.3em;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

#close-button {
    margin-left: 2em;

}

<div id="news-bar">
    <p class="news-message"> Our Website is currently being developed. Please stay patient.</p>
    <button class="news-message" id="close-button">X</button>
</div>

我尝试更改元素CSS，使其默认为隐藏，但这毫无意义，因为我希望它在用户访问网站时仍在此处

Html

来源：https://stackoverflow.com/questions/74815923/why-is-my-news-bar-not-hidden-when-i-click-on-the-close-button

4条答案

按热度按时间

afdcj2ne1#

也许你的脚本链接错误或者document.getElementById（）没有找到任何元素，请创建一个console.log来记录这两个document.getElementById（）返回的内容。另外，CSS可能会阻止你的样式更改，所以我建议你创建两个不同的id。例如：
CSS文件

#news-bar {
    background-color: rgb(255, 221, 0);
    margin-top: -1em;
    display: block;

}
#news-bar-hidden {
    display:none;
}

JS文件

let closeButton = document.getElementById('close-button');

// Listen for a click event on the close button
closeButton.addEventListener('click', () => {
let newsBar = document.getElementById('news-bar');

// Set the id of newsBar to "news-bar-hidden"
newsBar.removeAttribute("id")
newsBar.setAttribute("id","news-bar-hidden")
});

赞(0）回复(0）举报 2022-12-16

yhived7q2#

尝试将所有const更改为var，看看是否有效。
检查你的html id名称！[！[在这里输入图像描述][1]][1]
此错误意味着它无法获取定义的id [1]：https://i.stack.imgur.com/gaE4Q.jpg

赞(0）回复(0）举报 2022-12-16

kninwzqo3#

您的代码工作正常。
确保您没有忘记将js文件导入html，例如：