Javascript类列表添加隐藏不工作_Javascript_Html

Javascript类列表添加隐藏不工作

javascript html

Javascript类列表添加隐藏不工作,javascript,html,Javascript,Html,下面是通过DOM获取某些元素的代码片段。我只是附加了一个简单的onclick，它应该将“hidden”属性添加到每个检索到的元素的类列表中 HTML: 我试图调试这个脚本，因为当单击按钮时，相应的视图不会消失。已经有一段时间了，我无法理解这个问题。任何帮助都将不胜感激。这里我为“隐藏”类添加了一些css。当您单击id为“toggle view two btn”的元素时，将添加类让viewOneHeader=document.getElementById（“查看一个标题”）；让dragoni

下面是通过DOM获取某些元素的代码片段。我只是附加了一个简单的onclick，它应该将“hidden”属性添加到每个检索到的元素的类列表中

HTML:

我试图调试这个脚本，因为当单击按钮时，相应的视图不会消失。已经有一段时间了，我无法理解这个问题。任何帮助都将不胜感激。

这里我为“隐藏”类添加了一些css。当您单击id为“toggle view two btn”的元素时，将添加类

让viewOneHeader=document.getElementById（“查看一个标题”）；
让dragoniteImg=document.getElementById（“dragonite”）；
让toggleViewTwoBtn=document.getElementById（“toggleViewTwoBtn”）；
toggleViewTwoBtn.onclick=changeToViewTwo；
函数changeToViewTwo（）{
viewOneHeader.classList.add（“隐藏”）；
dragoniteImg.classList.add（“隐藏”）；
}

。隐藏{
显示：无；
}

查看一个标题
龙岩
切换查看两个btn

请回答您的问题并提供答案。您的代码按原样工作。“hidden”类被添加到具有指定id的元素中。你必须更新css以使“隐藏”类真正隐藏。你必须显示相关的HTML和css以便我们能够提供帮助。例如，如果让toggleviewtowbtn=document.getElementById（“toggleviewtowbtn”），然后当您尝试分配

时，toggleViewTwoBtn
将为null
。onclick

@colecm无法让您知道代码是否按原样工作以及是否存在CSS问题。我们没有足够的信息。是的，我可以知道@ScottMarcus，因为我运行了提供的代码，根本没有更改它。我添加了带有id的HTMLElements，并添加了类。你这么做了吗？再说一次，这并不能回答问题。它只显示工作代码。我们对老年退休金计划的情况了解不够，无法提供答案。@ScottMarcus，如果你阅读了所问的问题，你会注意到一个关键词“消失”。该引用是什么？“单击按钮时，相应的视图不会消失”这可能是因为用于更新

classList

的DOM元素引用无效，可能是因为事件处理程序设置不正确，也可能是因为存在CSS问题。毕竟，您的答案是正确的，但这并不否认这是一个猜测，也很容易出错。@user3131097“若要将答案标记为已接受，请单击答案旁边的复选标记，将其从灰色变为填充。”

<body>
        <h1 id="view-one-header">Exploring View 1</h1>
        <img id ="dragonite" src="https://cdn.bulbagarden.net/upload/8/8b/149Dragonite.png" alt="Dragonite">
        <button id="toggle-view-two-btn">Toggle View 2</button>
</body>

window.onload = pageLoad;

function pageLoad() {
    let viewOneHeader = document.getElementById("view-one-header");
    let dragoniteImg = document.getElementById("dragonite");
    let toggleViewTwoBtn = document.getElementById("toggle-view-two-btn");
    toggleViewTwoBtn.onclick = changeToViewTwo;

    function changeToViewTwo() {
        viewOneHeader.classList.add("hidden");
        dragoniteImg.classList.add("hidden");
   }