我的 JavaScript 没有改变 className 属性答案

【问题标题】：My JavaScript isn't changing className property我的 JavaScript 没有改变 className 属性
【发布时间】：2022-02-25 04:38:27
【问题描述】：

这是我的代码的主要部分，试图在单击我的按钮 (btn) 时切换 p 标签 (info) 上的类。我不确定我做错了什么。我以前从未使用过className 属性，所以我不确定我是否遗漏了一些简单的东西，或者我尝试此操作的逻辑是否存在根本错误。

var handler = function(event){
  if(info.className === 'on'){
    info.className='off';
  }else{
    info.className='on';
  }
};

btn.addEventListener('click', handler);

【问题讨论】：

info 声明在哪里？
我无法重现您的问题。 Here's a jsFiddle with a demo of your code working.
我使用 document.getElementById 来获取信息和 btn。我使用不同的方法进行了这项工作，只是更改了 info.style.display，但我试图弄清楚如何通过更改 className 来实现它。
谢谢。我有它写我只是不小心在我的实际代码中的 else 语句上有一个花括号，并且不知何故没有注意到。感谢您确认我的逻辑！

标签： javascript dom-events classname

【解决方案1】：

您的代码运行良好。你可以运行下面的 sn -p 看看它是否有效。

var btn = document.getElementById("btn"),
    info = document.getElementById("info");

var handler = function (event) {
    if (info.className === 'on') {
        info.className = 'off';
    } else {
        info.className = 'on';
    }
};

btn.addEventListener('click', handler);

.on {
    background-color: red;
}
.off {
    background-color: green;
}

<button id=btn>Button</button>
<p id=info>Info</p>

【讨论】：

谢谢。我的实际代码中有一个大括号不合适。我以为我做错了什么。感谢您使用此站点上的运行示例功能，我还没有看到它，所以这对了解很有用。

【解决方案2】：

什么是信息，它是一个ID？如果是，并且如果您使用的是简单的 javascript，则将其称为 document.getElementById('info') 或者如果是 jquery，则将其称为 $('#info')。

然而，听起来所有的名称元素和类名（信息、开、关）都显示为内置关键字。最好更改它们的名称，然后再试一次 infoElem、onClass、offClass 之类的名称，这些类应该在您的样式表中以类似方式再次重命名。

【讨论】：