Javascript 密码切换视图按钮在其他选项卡上不起作用

我一直在学习w3schools教程中的选项卡，然后使用另一个教程中的密码切换按钮。它在初始选项卡（登录选项卡）上运行良好，但在其余选项卡上，密码切换按钮停止工作。我不知道它为什么停止工作。我将其用于python应用程序的ui。在这个阶段，我只是尝试设计ui。请记住，我对html/css/java还很陌生，所以你可能会发现很多新手错误。非常感谢您的帮助

HTML:

JavaScript:

// START JAVA FOR TABS
function openPage(evt, pageName) {
    //Declare variables
    var i, tabpane, tablinkers;

    // Get all elements with class="tabpane" and hide them
    tabpane = document.getElementsByClassName("tabpane");
    for (i = 0; i < tabpane.length; i++) {
        tabpane[i].style.display = "none";
    }

    // Get all elements with class="tablinkers" and remove the class active
    tablinkers = document.getElementsByClassName("tablinkers")
    for (i = 0; i < tablinkers.length; i++) {
        tablinkers[i].className = tablinkers[i].className.replace(" active", "")
    }

    // Show the current tab, and add an "active" class to the link that opened the tab
    document.getElementById(pageName).style.display = "block";
    evt.currentTarget.className += " active";


}
document.getElementById("defaultOpen").click();


// START JAVA FOR PWD TOGGLE
const visibilityToggle = document.querySelector('.visibility');

const input = document.querySelector('.input-container input');

var password = true;

visibilityToggle.addEventListener('click', function() {
    if (password) {
        input.setAttribute('type', 'text');
        visibilityToggle.innerHTML = 'visibility';
    } else {
        input.setAttribute('type', 'password');
        visibilityToggle.innerHTML = 'visibility_off';
    }
    password = !password;

});

//为选项卡启动JAVA
函数openPage（evt，pageName）{
//声明变量
变量i、选项卡窗格、tablinkers；
//使用class=“tabpane”获取所有元素并隐藏它们
tabpane=document.getElementsByClassName（“tabpane”）；
对于（i=0；i

您的

addEventListener

仅将事件侦听器应用于第一个元素，因为

querySelector

仅按层次顺序返回第一个元素，而不是返回数组的

querySelectorAll

下面的代码使用jQuery，因为它是最有效的。如果您愿意，我可以将其转换为纯JS

//为选项卡启动JAVA
函数openPage（evt，pageName）{
//声明变量
变量i、选项卡窗格、tablinkers；
//使用class=“tabpane”获取所有元素并隐藏它们
tabpane=document.getElementsByClassName（“tabpane”）；
对于（i=0；i

@导入url（'https://fonts.googleapis.com/icon?family=Material+图标“）；
/*为选项卡启动CSS*/
/*定义窗口大小。发布前进行更改*/
.窗户{
边框：1px纯黑
}
/*容器固定选项卡按钮*/
.tabmenu{
显示器：flex；
对齐项目：居中；
弯曲方向：立柱；
浮动：左；
}
/*选项卡按钮*/
.选项卡菜单按钮{
大纲：无；
背景色：#4CAF50；
垂直对齐：中间对齐；
颜色：白色；
显示：内联块；
文本对齐：左对齐；
填充物：5px；
高度：32px；
宽度：80px；
边界：0px；
/*按钮边框*/
}
.tab菜单按钮：悬停{
背景色：#7289da；
}
.tab菜单按钮：激活{
背景颜色：耐火砖；
}
.tab菜单按钮：非（：最后一个子项）{
边框底部：无；
}
.tabpane{
边框：1px纯黑；
}
/*为行编辑、密码、PWD切换、按钮启动CSS*/
/*行编辑类（type=“text”）*/
.typetext{
文本对齐：左对齐；
颜色：黑色；
字体系列：“Poppins”，“Arial”，“Helvetica Neue”，无衬线；
}
/*密码类（type=“Password”）*/
.输入容器{
显示器：flex；
对齐项目：居中；
字体系列：“Poppins”，“Arial”，“Helvetica Neue”，无衬线；
}
.输入容器输入{
文本对齐：左对齐；
大纲：无；
颜色：#333；
字体系列：“Poppins”，“Arial”，“Helvetica Neue”，无衬线；
}
我{
位置：绝对位置；
颜色：#aaa；
游标：默认值；
左边距：180像素；
}

登录
登记
更新
帮助


能见度下降




能见度下降




能见度下降


帮助

正如其他人所说，问题在于，当页面加载时，您只定义了一次visibilityToggle，因此只有第一个图标连接到事件侦听器

您必须将事件侦听器附加到所有事件，如下所示：

//启动JAVA FOR PWD切换
let visibilityToggles=document.querySelectorAll（'.visibility'）；
for（可视性切换的常量切换）{
常量输入=toggle.previousElementSibling；
var password=true；
toggle.addEventListener（'click'，function（）{
如果（密码）{
input.setAttrib
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

/* START CSS FOR TABS */

/* Define window size. Change before release. */
.window {
    border: 1px solid black
}

/* Container holding tab buttons */
.tabmenu {
    display:flex;
    align-items:center;
    flex-direction:column;
    float: left;
}

/* The tab buttons */
.tabmenu button {
    outline: none;
    background-color: #4CAF50;
    vertical-align: middle;
    color: white;
    display: inline-block;
    text-align: left;
    padding: 5px;
    height: 32px;
    width: 80px;
    border: 0px; /* Button border. */
}

.tabmenu button:hover {
    background-color: #7289da;
}

.tabmenu button:active {
    background-color: firebrick;
}

.tabmenu button:not(:last-child) {
    border-bottom: none;
}

.tabpane {
    border: 1px solid black;
}

/* START CSS FOR LINE EDIT, PASSWORD, PWD TOGGLE, BUTTON */

/* Line Edit Class (type="text") */
.typetext {
    text-align: left;
    color: black;
    font-family: "Poppins", "Arial", "Helvetica Neue", sans-serif;
}

/* Password Class (type="password") */
.input-container {
    display: flex;
    align-items: center;
    font-family: "Poppins", "Arial", "Helvetica Neue", sans-serif;
}
.input-container input {
    text-align: left;
    outline: none;
    color: #333;
    font-family: "Poppins", "Arial", "Helvetica Neue", sans-serif;
}
i {
    position: absolute;
    color: #aaa;
    cursor: default;
    margin-left: 180px;
}

// START JAVA FOR TABS
function openPage(evt, pageName) {
    //Declare variables
    var i, tabpane, tablinkers;

    // Get all elements with class="tabpane" and hide them
    tabpane = document.getElementsByClassName("tabpane");
    for (i = 0; i < tabpane.length; i++) {
        tabpane[i].style.display = "none";
    }

    // Get all elements with class="tablinkers" and remove the class active
    tablinkers = document.getElementsByClassName("tablinkers")
    for (i = 0; i < tablinkers.length; i++) {
        tablinkers[i].className = tablinkers[i].className.replace(" active", "")
    }

    // Show the current tab, and add an "active" class to the link that opened the tab
    document.getElementById(pageName).style.display = "block";
    evt.currentTarget.className += " active";


}
document.getElementById("defaultOpen").click();


// START JAVA FOR PWD TOGGLE
const visibilityToggle = document.querySelector('.visibility');

const input = document.querySelector('.input-container input');

var password = true;

visibilityToggle.addEventListener('click', function() {
    if (password) {
        input.setAttribute('type', 'text');
        visibilityToggle.innerHTML = 'visibility';
    } else {
        input.setAttribute('type', 'password');
        visibilityToggle.innerHTML = 'visibility_off';
    }
    password = !password;

});