querySelectorAll仅支持单HTML文件？多页面密码切换功能异常

问题背景 #

我有register.html和login.html两个页面，原本在Stack Overflow代码片段中，点击眼睛图标可以切换密码输入框的type属性（在password和text之间切换）。但拆分到独立文件后，只有register.html的眼睛功能正常，login.html的眼睛点击后毫无反应，且console.log(eye.length)输出结果为1。两个页面都通过<script src="js/script.js"></script>引入了同一个脚本文件。

现有代码 #

JS代码（script.js） #

let eye = document.querySelectorAll('.eye');
console.log(eye.length);
let pass = document.querySelectorAll('.password');
eye.forEach(function (v, i) {
    v.addEventListener('click', function () {
        this.classList.toggle('fa-eye-slash');
        const type = pass[i].getAttribute('type') === 'password' ? 'text' : 'password';
        pass[i].setAttribute('type', type);
    })
});

CSS代码 #

.fa-eye {
    position: absolute;
    font-size: 24px;
    cursor: pointer;
}

register.html的密码输入区域 #

<div class="password-container">
    <input class="input-field-register password" type="password" placeholder="Passwort" maxlength="16">
    <i class="fa-solid fa-eye eye"></i>
</div>

login.html的密码输入区域 #

<div class="password-container">
    <input class="input-field-login password"type="password" placeholder="Passwort" maxlength="16">
    <i class="fa-solid fa-eye eye"></i>
</div>

问题原因 #

问题出在login.html的input标签属性书写错误：

看login.html里的input代码：

<input class="input-field-login password"type="password" placeholder="Passwort" maxlength="16">

这里class="input-field-login password"的闭合引号后没有空格，直接跟了type="password"。浏览器解析HTML时，会把password"type当成class属性的一部分，导致这个input实际上没有被添加password类。

而你的JS代码是通过.password类来获取密码输入框的，所以在login.html中pass数组的长度为0。当点击眼睛图标时，执行pass[i].getAttribute('type')会因为pass[0]是undefined而抛出错误，回调函数中断，自然看不到任何切换效果。

反观register.html的input标签，class属性结束后有空格再写type属性，password类被正确识别，所以功能正常。

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