javascript - 显示/隐藏 onClick 按钮不起作用

Question

大家好，我已经搜索了很多答案，但似乎没有一个有效，所以我将把我的代码放在这里，希望你能帮助我解决这个问题。

我将有两个按钮。第一个按钮 (show_Chappie) 将显示隐藏的内容，另一个按钮 (hide_Chappie) 将在单击时自行隐藏。

第二个按钮 (hide_chappie) 将隐藏内容并返回第一个按钮 (show_chappie)。 hide_chappie 按钮本身也会被隐藏。

信息 div 从一开始就已经隐藏了。我在 CSS 上使用 display:none;

到目前为止，这是我的 HTML 代码:

<button class ="show_chappie" onclick="showInfo()">Show More</button>
<div class="info">Info here.</div>
<button class ="hide_chappie" onclick="hideInfo()">Show Less</button>

到目前为止，这是我的 JavaScript 代码:

function showInfo(){

                document.getElementById('chappie_info').style.display = "inline-block";
                document.getElementById('show_chappie').style.display = "none";
                document.getElementById('hide_chappie').style.display = "inline-block";

            }

我还没有为 hide_chappie 按钮编写代码，因为我想先看看它是否起作用。

那么我哪里出错了？提前感谢您的帮助。

Answer 1

你试图通过 id 获取元素，而它们有一个 class，你应该将元素 class 更改为 id 像这样:

<button id="show_chappie" onclick="showInfo()">Show More</button>
<div id="info">Info here.</div>
<button id="hide_chappie" onclick="hideInfo()">Show Less</button>