Tengo una pequeña función que muestra y oculta contraseñas en los campos de entrada. Funciona bien cuando se aplica a un solo campo de entrada, pero cuando lo aplico a varios campos se comporta mal.
Por ejemplo: al hacer clic en el campo de entrada nueva contraseña, la función se activa para todos los demás campos, en cambio, debe activarse solo para el campo deseado.
¿Cómo puedo corregir este comportamiento no deseado? Lo siento pero soy relativamente nuevo, agradezco cualquier respuesta, gracias.
function showPassword() { var x = document.getElementById("password_current"); if (x.type === "password") { x.type = "text"; } else { x.type = "password"; } var y = document.getElementById("password_1"); if (y.type === "password") { y.type = "text"; } else { y.type = "password"; } var z = document.getElementById("password_2"); if (z.type === "password") { z.type = "text"; } else { z.type = "password"; } } label.t2 { font-size: 14px!important; line-height: 1.5em!important; font-weight: 500!important; margin-bottom: 6px!important; display: block; } /*Toggle Password class*/ #togglePw { display: none; } #togglePw + label:before { content: "\f06e"; } #togglePw:checked + label:before { content: "\f070"; } <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css"> <p class=""> <label class="t2" for="password_current">Current Password</label> <input type="password" class="field-settings" name="password" id="password_current" autocomplete="off"/> <input type="checkbox" id="togglePw" onclick="showPassword()"/> <label for="togglePw" class="fa"></label> </p> <p class=""> <label class="t2" for="password_1">New Password</label> <input type="password" class="field-settings" name="password_1" id="password_1" autocomplete="off" /> <input type="checkbox" id="togglePw" onclick="showPassword()"/> <label for="togglePw" class="fa"></label> </p> <p class=""> <label class="t2" for="password_2">Repeat New Password</label> <input type="password" class="field-settings" name="password_2" id="password_2" autocomplete="off" /> <input type="checkbox" id="togglePw" onclick="showPassword()"/> <label for="togglePw" class="fa"></label> </p>Divida la función en tres funciones showPassword1() , showPassword2() y showPassword3() . Para cada campo de entrada, asigne el atributo onclick a la función específica.
Pero, un enfoque más genérico y favorable es usar this como parámetro que será la referencia al elemento en el que se hizo clic.
<input type="checkbox" id="togglePw" onclick="showPassword(this)"/>entonces úsalo en la función
function showPassword(passwordField) { if (passwordField.type === "password") { passwordField.type = "text"; } else { passwordField.type = "password"; } }Pase el campo de destino a showPassword() :
function showPassword(targetID) { var x = document.getElementById(targetID); if (x.type === "password") { x.type = "text"; } else { x.type = "password"; } } label.t2 { font-size: 14px!important; line-height: 1.5em!important; font-weight: 500!important; margin-bottom: 6px!important; display: block; } /*Toggle Password class*/ #togglePw { display: none; } #togglePw + label:before { content: "\f06e"; } #togglePw:checked + label:before { content: "\f070"; } <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css"> <p class=""> <label class="t2" for="password_current">Current Password</label> <input type="password" class="field-settings" name="password" id="password_current" autocomplete="off"/> <input type="checkbox" id="togglePw_current" onclick="showPassword('password_current')"/> <label for="togglePw_current" class="fa"></label> </p> <p class=""> <label class="t2" for="password_1">New Password</label> <input type="password" class="field-settings" name="password_1" id="password_1" autocomplete="off" /> <input type="checkbox" id="togglePw_1" onclick="showPassword('password_1')"/> <label for="togglePw_1" class="fa"></label> </p> <p class=""> <label class="t2" for="password_2">Repeat New Password</label> <input type="password" class="field-settings" name="password_2" id="password_2" autocomplete="off" /> <input type="checkbox" id="togglePw_2" onclick="showPassword('password_2')"/> <label for="togglePw_2" class="fa"></label> </p>