为什么我的 "valid" JS 代码不起作用？

Question

我正在努力学习 javascript，特别感兴趣的是将元素从可见切换为不可见。我在网上找到了一个教程，当我尝试从我的家庭服务器运行时它会起作用。但是，当我将所有花哨的代码剥离为最基本的代码时，它就停止工作了。我将代码上传到 jsFiddle，但网站说我的代码完全有效。如果它是有效的，为什么它不起作用？

可以找到原教程Here。

谁能帮我解决这个问题？

这是我的jsFiddle

HTML

<button onclick="toggle('box');">Click here to toggle the box!</button>

    <div class="box">I am a Hidden Box!
    </div>

CSS

.box {
    display: none;
    position: absolute;
    top: 200;
    left: 200;
    height: 300px;
    width: 300px;
    overflow: hidden;
    background-color: yellow;
    transition: height 0.3s linear 0s;
}

Javascript

function toggle(x) {

    var panel = document.getElementByClassName(x);

    if (panel.style.display == "none") {
        panel.style.display = "block";
    }
    else {
        panel.style.display = "none";
    }
}

Answer 1

您有一些错误。

首先，您在 onLoad 中加载了 Javascript 窗格，但您在全局调用它，因此无法访问您的函数。

其次，您拼写错误 getElementsByClassName，您没有 s。

第三，document.getElementsByClassName() returns一个数组，所以你必须把它作为一个数组来访问。

这个有效：

function toggle(x) {
    var panel = document.getElementsByClassName(x)[0];

    if (panel === undefined) {
        return;
    }

    if (panel.style.display != "block") {
        panel.style.display = "block";
    } else {
        panel.style.display = "none";
    }
}

http://jsfiddle.net/0kjvwwxk/7/

或者（或者，如果您不必支持旧版本的 IE）您可以检查 computed 样式。

function toggle(x) {
    var panel = document.getElementsByClassName(x)[0];

    if (panel === undefined) {
        return;
    }

    if (getComputedStyle(panel).getPropertyValue("display") != 'block') {
        panel.style.display = "block";
    } else {
        panel.style.display = "none";
    }
}

http://jsfiddle.net/0kjvwwxk/10

Answer 2

jsfiddle 为您将代码包装在闭包中。

不幸的是，这会导致无法从全局范围访问您的函数。

您可以通过将函数附加到 window 对象来解决此问题：

http://jsfiddle.net/0kjvwwxk/5/

window.toggle = function(x) { ...

Answer 3

我注意到您的代码中存在两个问题：

你正在尝试获取节点列表，当你使用 getElementsByClassName 函数时，你会得到一个节点列表，你可以像数组一样使用它，在你的情况下，你不是从该列表中选择特定节点。
您尝试从文档中的属性触发的函数不工作（使用事件属性也被认为是不好的做法）

为了让您的代码正常工作，我做了以下工作：

function toggle(x) {

    var panel = document.getElementsByClassName(x)[0];

    if (panel.style.display == "none") {
        alert("plz");
        panel.style.display = "block";
    } else {
        panel.style.display = "none";
    }
}

document.getElementById("myButton").onclick = function(){ 
  toggle("box");
}

还有你的HTML：

<button id="myButton">Click here to toggle the box!</button>
<div class="box" style="display:none;">I am a Hidden Box!</div>

（请注意，我将 display:none; 置于内联，因为如果 JavaScript 未设置为内联，则 .style.display 将被取消设置，即使它位于单独的样式表中也是如此）

http://jsfiddle.net/0kjvwwxk/6/

Answer 4

是getElementsByClassName而不是getElementByClassName，这个方法returns一个数组，如果正好有这个class名字的元素，可以用

var panel = document.getElementsByClassName("box")[0];

[0] 是数组中的第一个元素 panel .

示例：

function toggle() {

    var panel = document.getElementsByClassName("box")[0];

    if (panel.style.display == "none") {
        panel.style.display = "block";
    }
    else {
        panel.style.display = "none";
    }
}

.box {
    display: none;
    position: absolute;
    top: 200;
    left: 200;
    height: 300px;
    width: 300px;
    overflow: hidden;
    background-color: yellow;
    transition: height 0.3s linear 0s;
}

<button onclick="toggle();">Click here to toggle the box!</button>

    <div class="box">I am a Hidden Box!
    </div>

为什么我的 "valid" JS 代码不起作用？

Why is my "valid" JS code not working?

javascript

toggle