目のアイコンでパスワード入力の表示・非表示を切り替えたい。

やりたいこと

下記ページを参考に、ログインフォームで
パスワード入力の際に目のアイコンを押すと、パスワード表示・非表示の切り替えができる欄を
【パスワード・パスワード確認用】の計２つ作成したいです。
https://kishiken.com/jq/input-password-toggle/

困っていること

パスワード１つの場合はできたのですが、確認入力用の２つ目の同様のパスワード欄を作成した際に
２つ目のパスワード表示・非表示が切り替わりません。

試したこと

class名やidに変更をして該当のJavaScript部分を２回記述するなどしましたが
うまくいきませんでした。
変更したのは、下記の中のclass３箇所です。
.js-password-toggle
.js-password
.js-password-label

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>テスト</title>
    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
  </head>
  <body>

    <form>
      <div class="box">
        <p>Password</p>
        <div class="box-pass">
          <input class="js-password" type="password" value="" id="pass-login" name="pass-login" maxlength="10" placeholder="99999" required="required">
          <input class="js-password-toggle button__input" id="password--eye" type="checkbox" name="password01">
          <label class="js-password-label button__label" for="password--eye"><i class="fas fa-eye"></i></label>
        </div>
      </div>
      <div class="box">
        <p>Password(確認)</p>
        <div class="box-pass">
          <input class="js-password" type="password" value="" id="pass-login-kakunin" name="pass-login-kakunin" maxlength="10" placeholder="99999" required="required">
          <input class="js-password-toggle button__input" id="kakunin--eye" type="checkbox" name="password02">
          <label class="js-password-label button__label" for="kakunin--eye"><i class="fas fa-eye"></i></label>
        </div>
      </div>
    </form>
    <style type="text/css">
      .box {
        display: flex;
        align-items: center;
      }
      p {
        padding-right: 20px;
      }
      .box-pass {
        width: 200px;
        position: relative;
      }
      .box-pass input {
        width: 200px;
        height: 30px;
      }
      input.button__input {
        display: none;
      }
      .button__label {
        position: absolute;
        right: 10px;
        top: 5px;
      }
    </style>
    <footer>
    </footer>
    <script>
      const passwordToggle = document.querySelector('.js-password-toggle');
      passwordToggle.addEventListener('change', function () {
        const password = document.querySelector('.js-password'),
              passwordLabel = document.querySelector('.js-password-label');
        if (password.type === 'password') {
          password.type = 'text';
          passwordLabel.innerHTML = '<i class="fas fa-eye-slash"></i>';
        } else {
          password.type = 'password';
          passwordLabel.innerHTML = '<i class="fas fa-eye"></i>';
        }
        password.focus();
      });
    </script>
  </body>
</html>

ご教示いただけますと幸いです。

hatena19

2020/11/02 14:03

HTMLコード、CSSコードも提示してください。

pondering

2020/11/02 15:15

コメントをありがとうございます。コードを追加いたしました。ぬけておりすみませんでした。

行動規範の内容に同意します

回答2件

既に正解の回答が出てますので、ダブりますが、

querySelectorAllで該当するすべての要素(NodeList)を取得する。
NodeListをループで回してイベントを設定する。(ForEachを使いました IE11非対応)
テキストボックスとラベルは.js-password-toggleの前後の位置なのでpreviousElementSibling とnextElementSiblingで取得できます。

js
1const passwordToggles = document.querySelectorAll('.js-password-toggle');
2
3passwordToggles.forEach((el) => {
4  el.addEventListener('change', function () {
5    const password = el.previousElementSibling,
6          passwordLabel = el.nextElementSibling;
7    if (password.type === 'password') {
8      password.type = 'text';
9      passwordLabel.innerHTML = '<i class="fas fa-eye-slash"></i>';
10    } else {
11      password.type = 'password';
12      passwordLabel.innerHTML = '<i class="fas fa-eye"></i>';
13    }
14    password.focus();
15  });
16});

IE11にも対応させるには、for文でループさせるように修正する必要があります。

投稿2020/11/03 01:23

hatena19

総合スコア33790

pondering

2020/11/03 04:47

ご回答をいただきありがとうございました。箇条書きでまとめていただいた箇所、何度も確認して自分で解決できるように学習していきたいと思います。

行動規範の内容に同意します

ベストアンサー

querySelectorだと該当した一番最初の要素1つだけを取得するので
querySelectorAllに変更し該当する要素を全て取得させました。
あとはfor文を使いそれぞれの要素ごとに処理させるようにしました。

Javascript
1        const passwordToggle = document.querySelectorAll('.js-password-toggle');
2
3        for (let i = 0; i < 2; i++) {
4            passwordToggle[i].addEventListener('change', function () {
5                const password = document.querySelectorAll('.js-password'),
6                    passwordLabel = document.querySelectorAll('.js-password-label');
7                if (password[i].type === 'password') {
8                    password[i].type = 'text';
9                    passwordLabel[i].innerHTML = '<i class="fas fa-eye-slash"></i>';
10                } else {
11                    password[i].type = 'password';
12                    passwordLabel[i].innerHTML = '<i class="fas fa-eye"></i>';
13                }
14                password[i].focus();
15            });
16        }