gpt4 book ai didi

Javascript classList 添加隐藏不起作用

转载 作者:行者123 更新时间:2023-11-28 04:03:25 25 4
gpt4 key购买 nike

下面是通过 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com