调用querySelector报错：提供的选择器为空，二次调用方法异常

错误根源 #

你遇到的Failed to execute 'querySelector' on 'Document': The provided selector is empty.错误，核心原因是变量被错误复用覆盖：

• 第一次调用buttonClicked时，this.#email存储的是合法的DOM选择器（比如#email_inp），所以document.querySelector(this.#email)能正常定位到输入框，随后你将this.#email重新赋值为输入框的value（即用户输入的邮箱字符串）。
• 第二次及之后调用时，this.#email已经不是选择器，而是用户输入的邮箱内容。用邮箱字符串作为选择器传给querySelector，属于无效选择器，自然触发报错。

从你打印的日志也能验证这点：第一次执行后this.#email的值已经从#email_inp变成了用户输入的邮箱文本，后续调用时用它当选择器必然失效。

修复方案 #

方案1：拆分选择器与值的存储 #

新增独立的私有属性分别保存选择器和输入值，避免覆盖：

class YourClass {
    #emailSelector; // 存储选择器
    #emailValue; // 存储输入值
    #password;
    #password_repeat;
    // ... 其他私有属性

    buttonClicked(email_input_id, password_input_id, password_repeat_input_id){
        this.clear_error_div();
        this.#emailSelector = email_input_id;
        this.#emailValue = document.querySelector(this.#emailSelector).value;
        this.#password = document.querySelector(password_input_id).value;
        this.#password_repeat = document.querySelector(password_repeat_input_id).value;
        
        // 后续逻辑使用this.#emailValue即可
        this.#password_strength();
        this.#passwords_equality();
        this.#password_proper_length();
        this.#error_container.innerHTML += this.error_message;

        // 注意：return语句会终止函数，将循环移到return前
        for (var key in this.errors) {
            var value = this.errors[key];
            console.log(key + " = " + value + '');
        }
        return this.#password_email_okay();
    }
}

方案2：直接使用方法传入的参数 #

沿用你处理#password和#password_repeat的逻辑，直接用传入的选择器参数获取值，不依赖this.#email存储选择器：

buttonClicked(email_input_id, password_input_id, password_repeat_input_id){
    this.clear_error_div();
    this.#email = document.querySelector(email_input_id).value; // 直接用传入的选择器
    this.#password = document.querySelector(password_input_id).value;
    this.#password_repeat = document.querySelector(password_repeat_input_id).value;
    
    this.#password_strength();
    this.#passwords_equality();
    this.#password_proper_length();
    this.#error_container.innerHTML += this.error_message;

    // 修复return位置，确保循环执行
    for (var key in this.errors) {
        var value = this.errors[key];
        console.log(key + " = " + value + '');
    }
    return this.#password_email_okay();
}

额外注意点 #

你代码中return this.#password_email_okay();语句会直接终止函数，导致后面的错误遍历循环永远不会执行，需要将循环代码移到return之前。

内容的提问来源于stack exchange，提问作者Paul Tennant