为什么classList.add不适用于html onClick

classList.add 方法用于向元素添加一个或多个类名。如果你发现 classList.add 在 HTML 的 onClick 事件中不起作用，可能是以下几个原因：

原因分析

脚本执行顺序：HTML 中的脚本可能在 DOM 完全加载之前执行。如果在 DOM 完全加载之前尝试修改 DOM，可能会导致脚本无法正常工作。
事件绑定问题：确保 onClick 属性正确绑定到元素上，并且事件处理函数能够被正确调用。
JavaScript 错误：检查是否有其他 JavaScript 错误阻止了代码的执行。

解决方法

1. 确保 DOM 完全加载后再执行脚本

你可以将脚本放在 window.onload 事件中，或者使用 DOMContentLoaded 事件来确保 DOM 完全加载后再执行脚本。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="myButton" onClick="addClass()">Click me</button>

    <script>
        window.onload = function() {
            document.getElementById('myButton').addEventListener('click', addClass);
        };

        function addClass() {
            var element = document.getElementById('myButton');
            element.classList.add('newClass');
        }
    </script>
</body>
</html>

2. 使用 `addEventListener` 绑定事件

直接在 HTML 元素上使用 onClick 属性绑定事件处理函数并不是最佳实践。推荐使用 addEventListener 来绑定事件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="myButton">Click me</button>

    <script>
        document.getElementById('myButton').addEventListener('click', addClass);

        function addClass() {
            var element = document.getElementById('myButton');
            element.classList.add('newClass');
        }
    </script>
</body>
</html>

3. 检查 JavaScript 错误

确保浏览器控制台中没有其他 JavaScript 错误。如果有错误，先解决这些错误，再尝试执行 classList.add 方法。

参考链接

通过以上方法，你应该能够解决 classList.add 在 HTML 的 onClick 事件中不起作用的问题。

为什么classList.add不适用于html onClick

、、、

我的第一步是在单击的时候向某些元素添加类，但在此过程中我遇到了一个问题，classList.add('')；在超文本标记语言中不起作用。我可能做错了什么，我不确定。<ul class="days"> <li onclick="this.classList.add('active')">2</li> <li <em

浏览 59提问于2019-05-03得票数 3

回答已采纳

3回答

如何使用带有javascript的onclick事件删除类

、

谢谢你的帮助function myFunction() { }} document.getElementById(

浏览 3提问于2021-01-04得票数 2

回答已采纳

1回答

页面中的Javascript页面

、

HTML -<div id="page2">Page2 <button onclick="thirdPage()">Next</button></div> <div id=&

浏览 0提问于2019-09-04得票数 0

回答已采纳

1回答

函数参数不适用于.classList.add

我已经创建了一个简单的函数来删除和添加类，但我不能让它工作，下面是要测试的html，它需要工作，以便当鼠标进入'.dropdown‘时，#myDropdown将得到一个添加到它的'show’的类，当鼠标离开时

浏览 16提问于2019-09-18得票数 1

回答已采纳

1回答

使用带有bgcolor属性的getElementById()

、、、

为什么这个代码不能工作？<html> <title> Home </title> <button onclick = "document.getElementById(&

浏览 5提问于2017-05-15得票数 2

回答已采纳

1回答

检查动态儿童的值

、

我的表单包含两个文本输入，用于移动和电子邮件。如果需要的话，用户可以增加更多的火焰动力。问题是，我无法验证由附录生成的子值。("tru") 它只适用于第一个元素。doctype html><head><title>Untitled Document</title> </head

浏览 0提问于2018-04-13得票数 1

回答已采纳

1回答

使用javascript按钮onclick事件递增变量id

、、、、

每当我单击一个按钮时，我都试图增加元素的id我的标记<button onclick="myfunction()">press me</button><script>

浏览 2提问于2021-11-20得票数 0

1回答

我有一个html页面，当一个按钮被点击时，它会打开一个iframe页面。iframe和page都是同一个站点！let closeBtn = document.querySelector ("# close_btn"); // The "cross" button in the iframe closeBtn.onclickdimming.classList.add ("write-dimming-off"); /

浏览 0提问于2021-03-08得票数 0

2回答

在单击事件中没有立即激活classList.add()

、、

document.getElementById("div1").classList.add("red");function highlight2(){} document.getElementById("div3").classLi

浏览 0提问于2018-10-09得票数 3

回答已采纳

3回答

OnClick函数不适用于HTML按钮

、

JSON.stringify(journey)); } {} HTML： <p>&l

浏览 1提问于2012-04-15得票数 1

回答已采纳

5回答

Javascript函数不提供类

、、

但是我的按钮不执行onclick之类的。控制台里没有错误。<html> <title>Javascript Stuff</title><body> <p>MI</p> <p>Pasta

浏览 1提问于2019-02-11得票数 0

回答已采纳

1回答

HTML onclick="“不适用于单选按钮

、、、、

我正在做一个引导风格的瓶子网站，我有一个表单与一些单选风格的按钮(与<input>的html标签)。我一直试图通过onclick=""调用js函数，但对我来说，它似乎只适用于真正的按钮(<button>标记)。这是我的代码。

浏览 0提问于2020-03-18得票数 0

3回答

Javascript "onclick“不适用于html* & php*

、、

onclick“使用”“。信息中使用"'“。这就是问题所在吗？我该怎么解决呢？echo "<td><a href='time.php?id=".$row['id']."' onclick='return confirm('Are you sure to delete this ?')

浏览 4提问于2015-03-05得票数 0

回答已采纳

3回答

CSS动画- classList只更改第一个实例

、、

我试图将动画应用于同一类的多个元素(.whiteKey)。下面的代码只将其添加到元素的第一个实例中。为什么会这样呢？document.querySelector('.whiteKey').classList.add('keysAnimate');<button class="whiteKey"></

浏览 1提问于2020-06-07得票数 1

回答已采纳

1回答

JavaScriptDOM-0

、

我是javascript的新手，我不明白为什么在立即调用的函数表达式中声明的函数不适用于DOM-0。我很确定这和可变范围有关<div onclick="test()">some Text</div>(function(){ function test

浏览 1提问于2015-02-18得票数 0

回答已采纳

1回答

hasAttribute(“角色”)崩溃网页

、

它突出显示没有角色或"onclick“的div，也没有"onkeypress”。 if(!divs[i].hasAttribute("onkeypress")){

浏览 2提问于2021-06-11得票数 1

回答已采纳

1回答

计算编号ID

、、

DOCTYPE html><head><body> .block {<button onclick="blockDown()">Down</button> <button oncl

浏览 3提问于2015-02-08得票数 0

回答已采纳

2回答

为什么不透明度没有动画效果？

、

document.getElementById('set').onclick = function() { document.getElementById('b').classList.add('clicked'); document.getElementById('reset').oncl

浏览 31提问于2019-06-07得票数 1

1回答

Javascript函数只能工作一次

、、、、

下面是我的JavaScript代码： document.getElementById('sll').classList.add("slide-right"); document.getElementById('sll').classList.add("slide-left&qu

浏览 0提问于2021-02-12得票数 1

2回答

在单击事件上未定义Javascript函数

我很难找出为什么我的函数是返回未定义的。我的html： <div class="slide"> <d

浏览 3提问于2019-03-03得票数 2

回答已采纳

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

为什么classList.add不适用于html onClick

原因分析

解决方法

1. 确保 DOM 完全加载后再执行脚本

2. 使用 addEventListener 绑定事件

3. 检查 JavaScript 错误

参考链接

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

2. 使用 `addEventListener` 绑定事件