下面是通过 DOM 获取一些元素的代码片段。我只是附加一个简单的 onclick，它应该将“隐藏”属性添加到每个检索到的元素的 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");
}
我正在尝试调试此脚本，因为单击按钮时，相应的 View 不会消失。已经有一段时间了，我无法弄清楚这个问题。任何帮助将不胜感激。
最佳答案
这里我为“隐藏”类添加了一些CSS。当您单击 id 为“toggle-view-two-btn”的元素时，就会添加类。
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");
}.hidden {
display: none;
}<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>关于Javascript classList 添加隐藏不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46896049/