Любой способ показать скрыть несколько паролей одновременно в Javascript?

Question

Я пытаюсь найти решение, можно ли одновременно показать / скрыть пароль?

Я могу показать / скрыть только первый исходный пароль. Кто-нибудь знает решение для этого или если вообще возможно?

Вот JavaScript и HTML код

function Toggle() {
  let btt = password
  if (btt.type === "password") {
    btt.type = "text";
  } else {
    btt.type = "password";
  }
}

function checkPassword(register) { //correct
  let fisrtPassword = register.password.value;
  let retypedPassword = register.retypedpassword.value;
  if (fisrtPassword === retypedPassword) {
    return true;
  } else {
    passwordMatchError.setAttribute("class", "error");
    passwordMatchError.innerHTML = ("Passwords do not match. Please retype");
    return false;
  }
}

Answer 1

Попробуй это. Примечание. Я удалил переключатель из поля пароля, щелкните и присвоил полям класс

. Я также оптимизировал ваш обработчик отправки и исправил орфографию, добавив обязательные

document.getElementById("showpasswords").addEventListener("click",function() {
  [...document.querySelectorAll(".password")].forEach(p =>
    p.type = p.type === "password" ? "text" : "password"
  )
})
document.getElementById("registerdetails").addEventListener("submit", function(e) {
  const errSpan = document.getElementById("passwordmatcherror");
  let firstPassword = this.password.value;
  let retypedPassword = this.retypedpassword.value;
  errSpan.classList.toggle("error", firstPassword !== retypedPassword);

  if (firstPassword !== retypedPassword) {
    errSpan.innerHTML = ("Passwords do not match. Please retype");
    e.preventDefault();
  }
});

<section>
  <div id="formcontainer">
    <form id="registerdetails" action="fma_t3confirm.html">
      <div>
        <label for="password">* Password (Must be 8 characters and include one uppercase, one lowercase and
						one numeric):</label><br/>
        <input type="password" class="password" id="password" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,8}$" required>
        <label><input type="checkbox" id="showpasswords"> Show passwords</label>
      </div>
      <div>
        <label for="retypedpassword">* Retype your password:</label><br/>
        <input type="password" class="password" id="retypedpassword">
        <span id="passwordmatcherror"></span>
      </div>
      <input type="submit" />
    </form>
  </div>
</section>

Answer 2

Простой способ - просто добавить еще одну кнопку для второго ввода:

function Toggle() {
    let btt = password;
    let btt2 = retypedpassword;

    if (btt.type === "password") {
        btt.type = "text";
        btt2.type = "text";
    } else {
        btt.type = "password";
        btt2.type = "password";
    }
}

Answer 3

В вашей функции Toggle вы в настоящее время обновляете поле только с идентификатором password. Поэтому, когда вы изменяете тип этого поля, изменяется только это поле. Вы не проверяете другое поле с именем retypedpassword, поэтому оно не будет изменено. Посмотрите на мое дополнение к вашему коду здесь, чтобы увидеть рабочую версию переключения для обоих полей.

function Toggle() {
    const fields = [password, retypedpassword]

    fields.forEach( x => {
        if (x.type === "password") {
            x.type = "text";
        } else {
            x.type = "password";
        }
    });
}

И второй пример, используя стиль вашего текущего кода:

function Toggle() {
    let btt = password
    if (btt.type === "password") {
        btt.type = "text";
    } else {
        btt.type = "password";
    }

    let otherfield = retypedpassword
    if (otherfield.type === "password") {
        otherfield.type = "text";
    } else {
        otherfield.type = "password";
    }
}

Answer 4

Добавьте класс pwd в оба поля пароля. Также удалите вызов метода Toggle при щелчке поля 2-го пароля

<input type="password" class="pwd" id="password" 
                                       pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,8}$">
<input type="password" class="pwd" id="retypedpassword">

Ваша функция Toggle: в функции Toggle получите все поля pwd, а затем переключите тип всех полей.

  function Toggle() {
    let pwdFiels = document.querySelectorAll('.pwd');

    for (let fields in pwdFiels) {
        if (pwdFiels[fields].type === "password") {
            pwdFiels[fields].type = "text";
        } else {
            pwdFiels[fields].type = "password";
        }
    }
}