点击按钮为div添加class触发TypeError，clear函数无法执行求解决

第一个错误：Uncaught TypeError: Cannot read properties of undefined (reading 'add') #

document.getElementsByClassName("name-row")返回的是HTMLCollection类数组集合，哪怕页面只有一个匹配元素，它也会返回包含该元素的集合而非单个DOM元素。集合本身没有classList属性，因此会抛出找不到add方法的错误。

修复方式（二选一）： #

1. 从集合中取出第一个目标元素：

let allNamesElm = document.getElementsByClassName("name-row");
allNamesElm[0].classList.add("showing");

2. 使用querySelector直接获取单个匹配元素（更简洁推荐）：

let allNamesElm = document.querySelector(".name-row");
allNamesElm.classList.add("showing");

第二个问题：自定义clear函数不执行 #

你定义的函数名clear和浏览器全局对象window下的内置方法冲突，点击按钮时调用的是浏览器内置的clear函数，而非你自定义的函数，因此代码未执行。

修复方式： #

修改函数名避免全局冲突，同步更新按钮的onclick属性：

<button type="button" onclick="clearNames()" id="clearButton">Clear</button>

<script>
function clearNames() {
    let allNamesElm = document.querySelector(".name-row");
    allNamesElm.classList.add("showing");
    window.alert("Cleared!");
    console.log("cleared");
};
</script>

修复后的完整代码示例 #

方案一：使用addEventListener绑定事件 #

<!DOCTYPE html>
<html lang="en">
<body>
    <div class="name-row">Hello!</div>
    <button type="button" id="clearButton">Clear</button>
    
    <script>
        document.getElementById('clearButton').addEventListener('click', function () {
                let allNamesElm = document.querySelector(".name-row");
                allNamesElm.classList.add("showing");
                window.alert("Cleared!");
                console.log("cleared");
            });
    </script>
</body>
</html>

方案二：使用自定义函数绑定onclick #

<!DOCTYPE html>
<html lang="en">
<body>
    <div class="name-row">Hello!</div>
    <button type="button" onclick="clearNames()" id="clearButton">Clear</button>
    
    <script>
        function clearNames() {
                let allNamesElm = document.querySelector(".name-row");
                allNamesElm.classList.add("showing");
                window.alert("Cleared!");
                console.log("cleared");
            };
    </script>
</body>
</html>

内容的提问来源于stack exchange，提问作者Sebastian Colberg