show/hide geeft Cannot read property 'addEventListener' of null
Gewijzigd op 09/09/2017 14:56:38 door Harry H Arends
Ben je dat vergeten bij je button?
Oplossing is om de JavaScript NA de html te plaatsen.
Andere oplossing is dit :
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
document.addEventListener("DOMContentLoaded", function(event) {
document.getElementById("eye").addEventListener("click", function() {
if (pwShown == 0) {
pwShown = 1;
show();
} else {
pwShown = 0;
hide();
}
}, false);
});
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
Toevoeging op 09/09/2017 16:00:11:
Je kan de eventlistener ook zo maken :
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
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);
});
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.
Gewijzigd op 09/09/2017 15:44:56 door Adoptive Solution
Frank Nietbelangrijk op 09/09/2017 15:28:30:
Dit staat in de htmlid="eye"
Ben je dat vergeten bij je button?
Ben je dat vergeten bij je button?
Code (php)
1
2
3
4
5
2
3
4
5
<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>
<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>
Toevoeging op 09/09/2017 16:28:39:
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.
.....
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.
Gewijzigd op 09/09/2017 16:32:10 door Harry H Arends
Misschien moet u het in uw webpagina uitproberen. Da's tenslotte de plek waar het bedoeld is.
Code (php)
1
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
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
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);
});
};
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);
});
};
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
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
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);
}
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);
}
Code (php)
1
2
3
2
3
function generatePW() {
document.getElementById('pwd').value = randomPassword(document.getElementById('pwd').getAttribute('maxlength'));
}
document.getElementById('pwd').value = randomPassword(document.getElementById('pwd').getAttribute('maxlength'));
}
Je moet tenslotte wat.
Toevoeging op 14/09/2017 15:57:45:
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:
Dat is niet waar, deze is er wel degelijk in de fiddleOmdat nergens te zien is wat myform.length.value is,
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<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>
<input type="button" class="button" value="Generate" onClick="generatePW();" tabindex="2">
</li>
<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>
<input type="button" class="button" value="Generate" onClick="generatePW();" tabindex="2">
</li>
Lukt het met mijn oplossing wel?
Adoptive Solution op 14/09/2017 16:30:10:
Bedankt dat werktHet zal er wel staan, maar ik zie het niet zo snel.
Lukt het met mijn oplossing wel?
Lukt het met mijn oplossing wel?
Het wachtwoord sla ik met deze waarde op in de database
Code (php)
1
hash('sha256', sha1(uniqid().$usr_PW."Stable-Management"));
Gewijzigd op 14/09/2017 16:44:48 door Harry H Arends