Question

下面是一段通过DOM获取一些元素的代码片段。我只附上一个简单的onclick，它应该添加＆＃34;隐藏＆＃34;属性到每个检索元素的classList。

HTML：

<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>

使用Javascript：

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");
   }

我正在尝试调试此脚本，因为单击该按钮时，相应的视图不会消失。已经有一段时间了，我无法弄清楚这个问题。任何帮助将不胜感激。

Answer 1

这里我为课程添加了一些css＆＃34;隐藏＆＃34;。当您点击ID为＆＃34; toggle-view-two-btn＆＃34;的元素时这些课程已被添加。

＆＃13;

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");
}

＆＃13;

.hidden {
    display: none;
}

＆＃13;

<div id="view-one-header">view-one-header</div>
<div id="dragonite">dragonite</div>
<div id="toggle-view-two-btn">toggle-view-two-btn</div>

＆＃13;

Javascript classList添加隐藏不起作用

1 个答案: