Ciao, a parte il problema in oggetto, vedo diversi errori/pasticci, a partire dalla formattazione del codice che è male indentato e presenta errori di markup e CSS anche nella pagina di esempio (non parliamo poi di come è stato riportato sul forum 
).
Il primo consiglio che ti do, quindi, è cercare di essere il più ordinato possibile nella stesura del codice, così ti sarà anche più semplice individuare possibili errori, come in questo caso. Solitamente i code-editor, un po' più avanzati, hanno già delle funzionalità di auto indentazione, ma anche se usi il semplice blocco note puoi sempre passare il codice in un qualche formattatore online in modo da tenerlo ordinato e leggibile.
Riguardo il problema in oggetto, controlla nello script cosa viene impostato come valore dell'attributo type.
Questo è ciò che fai nel primo campo (quello funzionante):
codice:
const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
password.setAttribute('type', type);
Mentre questo è nel secondo campo (dove hai il problema)
codice:
const type1 = password1.getAttribute('type') === 'password' ? 'text' : 'conferma_password';
password1.setAttribute('type', type1);
La stringa "conferma_password" ovviamente non è un valore valido per l'attributo type.
Prova a correggere.
Un altro errore è l'uso non appropriato del this dentro le funzioni-freccia:
codice:
togglePassword.addEventListener('click', () => {
// ...
// Toggle the eye and bi-eye icon
this.classList.toggle('bi-eye');
});
Di fatto questa riga genera un errore di script (puoi verificare tu stesso attraverso la console del tuo browser). Infatti quella classe dovrebbe cambiare la grafica dell'occhietto (alternandola a quello con lo slash) ma questo non avviene.
E' un errore comune pensare che le due sintassi "()=>{}" e "function(){}" siano sempre intercambiabili ma in alcuni casi non è esattamente così.
Il problema, in questo caso, sta nell'uso della keyword "this".
Quando si definisce una funzione come listener di un evento, usando la sintassi tradizionale "function(){}", il suo contesto (e quindi il this usato al suo interno) fa riferimento all'oggetto da cui è scaturito l'evento stesso. Riportandolo al tuo caso, quel this dovrebbe puntare all'elemento #togglePassword, ma così non è.
Nelle funzioni-freccia, infatti, il this non viene vincolato al contesto dell'oggetto di riferimento, ma punta direttamente all'oggetto principale window che, tra l'altro, non possiede il metodo classList(), per cui viene generato un errore nell'esecuzione dello script.
Questo punto puoi risolverlo facilmente usando la sintassi tradizionale oppure passando attraverso l'oggetto event (argomento della funzione listener) per il quale puoi accedere all'oggetto di riferimento attraverso la proprietà currentTarget.
Quindi così:
codice:
togglePassword.addEventListener('click', function(){
// ...
this.classList.toggle('bi-eye');
});
oppure così:
codice:
togglePassword.addEventListener('click', (evt) => {
// ...
evt.currentTarget.classList.toggle('bi-eye');
});
Ovviamente devi correggere lo script per entrambe i campi.
Tra parentesi: personalmente avrei ottimizzato la funzione definendola una sola volta per i vari campi, ed evitando quindi ridondanze; ma per ora penso sia già molto se riesci a correggere gli errori indicati, nonché risolvere il problema in oggetto 
Ancora, per convenzione e per un fattore logico, la grafica dell'occhietto dovrebbe essere senza slash quando la password è offuscata (serie di punti), perché sta ad intendere che cliccandoci deve essere mostrata la password in chiaro; e a quel punto dovrebbe apparire l'occhietto con lo slash, ad intendere che cliccando nuovamente deve essere offuscata la password.
Nel tuo esempio invece avviene il contrario. Ovviamente devi valutare tu se ti sta bene così o se sia meglio correggere.
Ancora, nel CSS vedo un errore (di distrazione?) in questa regola:
codice:
.bi-eye-slash {
/* ... */
color: 1px solid red;
}
La proprietà color ovviamente non può avere quel valore. Forse intendevi definire border.
Prova a correggere e fai sapere.
Rispondi quotando
Originariamente inviata da fabiodj
