为什么classList.add不适用于html onClick_函数参数不适用于.classList.add_onclick事件不适用于svg元素 - 腾讯云开发者社区

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>