show/hide geeft Cannot read property 'addEventListener' of null

id="eye"

Ben je dat vergeten bij je button?

De eventlistener wordt uitgevoerd voordat de html geladen is.

Oplossing is om de JavaScript NA de html te plaatsen.

Andere oplossing is dit :

document.addEventListener("DOMContentLoaded", function(event) { 
    document.getElementById("eye").addEventListener("click", function() {
	if (pwShown == 0) {
		pwShown = 1;
		show();
	} else {
		pwShown = 0;
		hide();
	}
}, false);
});

Hier gevonden :

https://stackoverflow.com/questions/9899372/pure-javascript-equivalent-to-jquerys-ready-how-to-call-a-function-when-the

[size=xsmall]Toevoeging op 09/09/2017 16:00:11:[/size]

Je kan de eventlistener ook zo maken :

document.addEventListener("DOMContentLoaded", function(event) {
	document.getElementById("eye").addEventListener("click", function() {
		var p = document.getElementById('pwd');
		if ( p.getAttribute('type') == 'password' ) {
			p.setAttribute('type', 'text');
		} else {
			p.setAttribute('type', 'password');
		}
	}, false);
});

Scheelt weer regels code.

Frank Nietbelangrijk op 09/09/2017 15:28:30

id="eye"

Ben je dat vergeten bij je button?

Dit staat in de html

                <li><label for='password' >Password*:</label>
                <input type='password' name='password' class="masked" id='pwd' value = "<?php echo RandomPass(8);?>" maxlength="10" required  placeholder="Create a strong password"/>
                <button type="button" id="eye">
                    <img src="https://cdn0.iconfinder.com/data/icons/feather/96/eye-16.png" alt="eye" />
                </button> </li>

[size=xsmall]Toevoeging op 09/09/2017 16:28:39:[/size]

Adoptive Solution op 09/09/2017 15:42:33

De eventlistener wordt uitgevoerd voordat de html geladen is.

Oplossing is om de JavaScript NA de html te plaatsen.

.....

Ik heb jouw oplossingen getest in de fiddle maar deze werken daar niet, echter verplaatsing naar het einde (jouw eerste suggestie ) is de oplossing.

Ik heb beide oplossingen toegepast en het werkt zoals vermeid.

Misschien moet u het in uw webpagina uitproberen. Da's tenslotte de plek waar het bedoeld is.

In ieder geval gaat het hier mis:

document.getElementById("eye");

Het lukt dus niet om een HTML element te vinden met id="eye".

Je kan nog proberen om je code tussen de window.onload functie te plaatsen

window.onload = function() {
	document.addEventListener("DOMContentLoaded", function(event) {
		document.getElementById("eye").addEventListener("click", function() {
			var p = document.getElementById('pwd');
			if ( p.getAttribute('type') == 'password' ) {
				p.setAttribute('type', 'text');
			} else {
				p.setAttribute('type', 'password');
			}
		}, false);
	});
};

Dit geleerd/bekeken hebbende wilde ik een auto password generatie toevoegen.
De fiddle. Als ik echter zelf wat intik werkt het zichtbaar maken, maar ik kan geen wachtwoord aanmaken met de knop. Wat ben ik hiet vergeten? dit is de toegevoegde kode

function randomPassword(length) {
    var chars = "abcdefghijklmnopqrstuvwxyz!@#$%^&*()-+<>ABCDEFGHIJKLMNOP1234567890";
    var pass = "";
    for (var x = 0; x < length; x++) {
        var i = Math.floor(Math.random() * chars.length);
        pass += chars.charAt(i);
    }
    return pass;
}

function generatePW() {
    myform.new_password.value = randomPassword(myform.length.value);
}

Omdat nergens te zien is wat myform.length.value is, heb ik er dit van gebrouwen :

function generatePW() {
    document.getElementById('pwd').value = randomPassword(document.getElementById('pwd').getAttribute('maxlength'));
}

Je moet tenslotte wat.

[size=xsmall]Toevoeging op 14/09/2017 15:57:45:[/size]

Als het om wachtwoorden gaat heb ik de voorkeur voor makkelijk te onthouden wachtwoorden.

En daar Latijn de laatste tijd in de mode is, waarom ook niet hier :

http://adoptive.esy.es/passwords/

Keuze uit 2800 Latijnse woorden.

Adoptive Solution op 14/09/2017 15:48:49

Omdat nergens te zien is wat myform.length.value is,

Dat is niet waar, deze is er wel degelijk in de fiddle

            <li><label for='password' >Wachtwoord :</label>
                <input type='password' name='new_password' class="masked" id='pwd' value = "" maxlength="10" required  placeholder="Create a strong password"/>
                <button type="button" id="eye">
                    <img src="https://cdn0.iconfinder.com/data/icons/feather/96/eye-16.png" alt="eye" />
                </button>&nbsp;
                <input type="button" class="button" value="Generate" onClick="generatePW();" tabindex="2">
            </li>

Het zal er wel staan, maar ik zie het niet zo snel.

Lukt het met mijn oplossing wel?

Adoptive Solution op 14/09/2017 16:30:10

Het zal er wel staan, maar ik zie het niet zo snel.

Lukt het met mijn oplossing wel?

Bedankt dat werkt
Het wachtwoord sla ik met deze waarde op in de database

hash('sha256', sha1(uniqid().$usr_PW."Stable-Management"));