显示/隐藏 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>

Answer 2

您应该将代码更改为：

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

如果你想在这里使用类，你应该将你的Javascript代码更改为

function showInfo(){

                document.getElementByClass('chappie_info')[0].style.display = "inline-block";
                document.getElementByClass('show_chappie')[0].style.display = "none";
                document.getElementByClass('hide_chappie')[0].style.display = "inline-block";

            }

因为getElementsByClass函数返回一个集合，所以你应该添加[]来找出你想要的结果！

Answer 3

把所有的id都转成class有点烦，可以用：

function showInfo(){

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

}

---

现在几乎所有浏览器都支持这一点，所以我不会担心。如果这仍然是您需要支持古老浏览器的问题，请使用：

document.getElementsByClassName = function (a) {
    var b = document.getElementsByTagName('*'), i, c=[];
    for (i = 0; i < b.length; i += 1) {  b[i].getAttribute('class')===a&&c.push(b[i]);  }
    return c;
};