Fonction non réutilisable sur un des 2 formulaires ?

Bonjour à tous

Voici une fonction qui montre/cache le mot de passe dans un formulaire au click sur une icône dans le champ 'password'

2 formulaires devraient avoir accès à cette fonction (loginForm.php et RegistrationForm.php) or la fonction curieusement ne fonctionne que dans 'loginFormPHP', dans l'autre formulaire je reçois une erreur en console ['pswShowHide' uncaught reference error] et rien ne se passe au click sur ladite icône... les deux formulaires sont des modales qui s'ouvrent au click sur link inclus dans le header de mon site)...

Merci d'avance pour votre aide

pswShowHide.js :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
var pswrdField = document.querySelector("form input[type='password']")
var toggleBtn = document.querySelector("form .field i");
 
toggleBtn.onclick = () => {
    if (pswrdField.type == "password") {
        pswrdField.type = "text"
        toggleBtn.classList.add("active")
    } else {
        pswrdField.type = "password"
        toggleBtn.classList.remove("active")
    }    
}

loginForm.php :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<div id="loginForm" name="loginForm" class="modal">
 
    <form class="modal-content animate" name="loginForm" action="#" method="POST">
 
        <div class="form-header">
            <h1 class="form-title">Formulaire de connexion</h1>
            <span onclick="document.getElementById('loginForm').style.display='none'" class="close" title="Fermer ce formulaire">&times;</span>
        </div>
 
        <div class="field input">
            <label for="userName"><b> Nom d'utilisateur</b></label>
            <input type="text" placeholder="Votre Pseudo ou votre nom d'utilisateur" name="userName" required>
        </div>
 
        <div class="field input">
            <label for="userPassword"><b>Mot de passe</b></label>
            <input class="password" type="password" placeholder="Votre mot de passe" name="userPassword" required>
            <i class="fas fa-eye" onclick="pswShowHide(this)"></i>
        </div>
 
        <button type="submit" name="login-btn">Se connecter</button>
        <label>
            <input type="checkbox" checked="checked" name="remember"> Se rapeller de moi
        </label>
        <p class="registrationModalLink">Pas encore inscrit ? <a href="#" onclick="openModal('registrationFormModal')" id="registrationModalLink">Cliquez ici</a></p>
 
        <div class="form-footer" style="background-color:#f1f1f1">
            <button type="button" onclick="document.getElementById('loginForm').style.display='none'" class="cancelbtn">Annuler et fermer</button>
            <span class="psw">Mot de passe perdu? <a href="#">Cliquez ici</a></span>
        </div>
    </form>
</div>

registrationForm.php :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<div id="registrationForm" name="registrationForm" class="modal">
 
    <form class="modal-content animate" name="registrationForm" action="#" method="POST">
 
        <div class="form-header">
            <h1 class="form-title">Formulaire d'inscription</h1>
            <span onclick="document.getElementById('registrationForm').style.display='none'" class="close" title="Fermer ce formulaire">&times;</span>
        </div>
 
        <div class="field input">
            <label for="userName"><b> Nom d'utilisateur</b></label>
            <input type="text" placeholder="Votre Pseudo ou votre nom d'utilisateur" name="userName" id="userName" required>
        </div>
 
        <div class="field input">
            <label for="userEmail"><b>Mail</b></label>
            <input type="email" placeholder="Votre mail principal" name="userEmail" id="userEmail" required>
        </div>
 
 
        <div class="field input">
            <label for="userPassword"><b>Mot de passe</b></label>
            <input class="password" type="password" placeholder="Votre mot de passe" name="userPassword" id="userPassword" required>
            <i class="fas fa-eye" onclick="pswShowHide(this)"></i>
            <ul class="password-check-msg">
                <li id="taille-mdp"></li>
                <li id="min-mdp"></li>
                <li id="maj-mdp"></li>
                <li id="chiffre-mdp"></li>
            </ul>
        </div>
 
        <div class="field input">
            <label for="confirmUserPassword"><b>Confirmer le mot de passe</b></label>
            <input class="password" type="password" placeholder="Votre mot de passe" name="confirmUserPassword" id="confirmUserPassword" required>
            <i class="fas fa-eye" onclick="pswShowHide(this)"></i>
        </div>
 
        <div class="field input">
            <label for="userPhone"><b>Telephone principal(facultatif)</b></label>
            <input type="text" placeholder="Votre telephone principal" name="userPhone" id="userPhone">
        </div>
 
        <p class="userAlert" id="userAlert" style="display:none;color:red;font-family:Verdana, Geneva, sans-serif"></p>
        <button type="submit" name="registration-btn" id="registration-btn">S'inscrire</button>
 
 
        <div class="form-footer" style="background-color:#f1f1f1">
            <button type="button" onclick="document.getElementById('registrationForm').style.display='none'" class="cancelbtn">Annuler et fermer</button>
        </div>
    </form>
</div>