Django点击按钮切换密码显示失效：仅单个字段生效问题求助

问题根源 #

1. 重复id冲突：循环里所有密码框和按钮都用了相同的id="pwd"和id="btn"，DOM要求id必须唯一，document.getElementById()只会返回第一个匹配的元素，导致所有按钮都只控制第一个密码框。
2. 函数重复定义：showHide()函数被放在{% for %}循环内，每次循环都会重新定义这个函数，最终只有最后一次循环的函数生效，且逻辑还是针对固定id。

修复方案 #

• 将showHide()函数移到循环外，避免重复定义。
• 让按钮点击时传递自身引用，通过DOM层级关系找到对应的密码框，不用依赖唯一id（更简洁）。
• 移除重复的id，改用类名来定位元素。

修改后的模板代码 #

{% if passwords %}
<div class="body">
    <div class="origin">
        <input type="number" name="noofpwds" value={{no}} disabled hidden>
        <table class="table table-borderless" id="tab">
            <h1>your passwords </h1>
            <div class="parent">
                {% for pwd in passwords %}
                <div class="password-group">
                    <input type="text" class="span" value={{pwd.field}} readonly>
                    <input type="password" placeholder="type old password" value={{pwd.pwd}} class="input password-field" required>
                    <button class="btn btn-primary" onclick="showHide(this)">show</button>
                </div>
                {% endfor %}
            </div>
            <tr class="submit-btn">
                <td>
                    <a href="{% url 'updatepwd' %}"><button class="btn btn-primary" type="submit">update password</button></a>
                </td>
            </tr>
        </table>
    </div>
</div>

<script>
function showHide(btn) {
    // 找到当前按钮所在分组里的密码框
    const passwordField = btn.parentElement.querySelector('.password-field');
    if (passwordField.getAttribute("type") === "password") {
        passwordField.setAttribute("type", "text");
        btn.innerText = "hide";
    } else {
        passwordField.setAttribute("type", "password");
        btn.innerText = "show";
    }
}
</script>
{% endif %}

关键改动说明 #

• 给每个密码框和按钮的父容器加了password-group类，方便通过父元素定位。
• 密码框改用password-field类代替重复的id。
• 按钮的onclick改为showHide(this)，把当前按钮对象传给函数。
• 函数里通过btn.parentElement.querySelector('.password-field')精准找到当前按钮对应的密码框，避免id冲突。
• 将<script>移到循环外，只定义一次函数，避免重复覆盖。

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