使用JS实现表单验证时按钮点击无反应该如何修复？

你的代码存在3个核心问题，修复方案如下： #

问题列表

• 类选择器语法错误：document.querySelector("cta-btn")缺少类选择器前缀.，会被识别为查找<cta-btn>标签，找不到对应按钮导致点击事件绑定失败。
• getElementsByClassName返回的是类数组的HTMLCollection集合，不是单个DOM元素，直接读取.value、.style属性会报错，需要通过索引提取目标元素（页面只有一个对应类元素时取索引[0]即可）。
• 如果你的按钮是表单内的type="submit"按钮，点击会触发默认提交行为刷新页面，导致你看不到样式修改效果，需要阻止默认行为。

修复后代码

// 类选择器加.前缀
document.querySelector(".cta-btn").addEventListener("click", function(e) {
    // 阻止表单默认提交（如果按钮不是submit类型可以删除这行）
    e.preventDefault();
    // 从集合中取第一个元素再读value
    let name = document.getElementsByClassName("first-name")[0].value;
    if (name.trim() === "") { // 加trim避免用户只输入空格的情况
        // 同样取集合第一个元素再修改样式
        document.getElementsByClassName("name-error")[0].style.visibility = "visible";
        document.getElementsByClassName("first-name")[0].style.border = "1px solid red";
    }
});

内容的提问来源于stack exchange，提问作者Djordje Rankovic