Någon som kan förklara mig varför min Event Object "fungerade" inte hos mig? (Javascript)

Permalänk

Någon som kan förklara mig varför min Event Object "fungerade" inte hos mig? (Javascript)

Jag har en javascript code med enkel event object

function checkLength(e, minLength){ var el, elMsg; if(!e){ e=window.event; } el = e.target || e.srcElement; elMsg = el.nextSibling; if(el.value.length<minLength){ elMsg.innerHTML = 'Username must be' + minLength + 'characters or more'; } else{ elMsg.innerHTML = ' '; } } var elUsername = document.getElementById('username'); if(elUsername.addEventListener){ elUsername.addEventListener('blur', function(e){ checkLength(e,5); }, false); } else{ elUsername.attachEvent('onblur', function(e){ checkLength(e,5); }); }

Och jag hade en html fil:

<!DOCTYPE html> <html> <head> <title>JavaScript &amp; jQuery - Chapter 6: Events - Event Listener and Event Object</title> <link rel="stylesheet" href="CSS/c06.css" /> </head> <body> <div id="page"> <h1>List King</h1> <h2>New Account</h2> <form method="post" action="http://www.example.org/register"> <label for="username">Create a username: </label> <input type="text" id="username" /> <div id="feedback"></div> <label for="password">Create a password: </label> <input type="password" id="password" /> <div id="feedback"></div> <input type="submit" value="sign up" /> </form> </div> <script src="js/event-listener-with-object.js"></script> </body> </html>

och javascript fungerade inte. Jag menar chrome kunde läsa js filen men ingen vårningtext var synligt.(Vårningtext måste visas om användaren har skrivit in namnet kortare än 5 bokstäver)

Men!
Efter jag har bytt HTML linjen

<input type="text" id="username" /> <div id="feedback"></div>

till

<input type="text" id="username" /> <div id="feedback"></div>

och problemet löstes. Någon som kan förklara mig varför?

Permalänk
Skrivet av ProgrammeringElev:

Jag har en javascript code med enkel event object

function checkLength(e, minLength){ var el, elMsg; if(!e){ e=window.event; } el = e.target || e.srcElement; elMsg = el.nextSibling; if(el.value.length<minLength){ elMsg.innerHTML = 'Username must be' + minLength + 'characters or more'; } else{ elMsg.innerHTML = ' '; } } var elUsername = document.getElementById('username'); if(elUsername.addEventListener){ elUsername.addEventListener('blur', function(e){ checkLength(e,5); }, false); } else{ elUsername.attachEvent('onblur', function(e){ checkLength(e,5); }); }

Och jag hade en html fil:

<!DOCTYPE html> <html> <head> <title>JavaScript &amp; jQuery - Chapter 6: Events - Event Listener and Event Object</title> <link rel="stylesheet" href="CSS/c06.css" /> </head> <body> <div id="page"> <h1>List King</h1> <h2>New Account</h2> <form method="post" action="http://www.example.org/register"> <label for="username">Create a username: </label> <input type="text" id="username" /> <div id="feedback"></div> <label for="password">Create a password: </label> <input type="password" id="password" /> <div id="feedback"></div> <input type="submit" value="sign up" /> </form> </div> <script src="js/event-listener-with-object.js"></script> </body> </html>

och javascript fungerade inte. Jag menar chrome kunde läsa js filen men ingen vårningtext var synligt.(Vårningtext måste visas om användaren har skrivit in namnet kortare än 5 bokstäver)

Men!
Efter jag har bytt HTML linjen

<input type="text" id="username" /> <div id="feedback"></div>

till

<input type="text" id="username" /> <div id="feedback"></div>

och problemet löstes. Någon som kan förklara mig varför?

JAG HAR SKRIVIT EN FEL JAVASCRIPT KOD. JAG HAR LAGT EN ANNAN KOD

Permalänk
Medlem

du har två element med samma id. dvs <div id="feedback"></div>

ID ska vara unikt, finns det flera skall klasser användas.

Visa signatur

CPU: Ryzen 9 3900x Noctua NH-D14 MOBO: TUF Gaming X570-PLUS GPU: GTX 980 RAM: 32 GB 3200 MHz Chassi: R4 PSU: Corsair AX860 Hörlurar: SteelSeries 840 Mus: Logitech G502 Lightspeed V.v. nämn eller citera mig för att få svar.

Permalänk
Skrivet av Haptic:

du har två element med samma id. dvs <div id="feedback"></div>

ID ska vara unikt, finns det flera skall klasser användas.

oj den kopierades fel. Ignorera den sista feedbacken
Jag har prövat i min code editor både med duplicerad feedback och en feedback och resultaten var samma
vårningtext visas inte om feedbacken startas i nästa linje.

Permalänk
Medlem

function checkLength(e, minLength){ var el, elMsg; if(!e){ e=window.event; } el = e.target || e.srcElement; elMsg = $("#feedback"); if(el.value.length<minLength){ elMsg.html('Username must be ' + minLength + ' characters or more'); } else{ elMsg.html(""); } }

sådär fungerar det för mig. la en selector på feedback diven, och bytte "innerhtml =" till funktionen "html()"

Visa signatur

CPU: Ryzen 9 3900x Noctua NH-D14 MOBO: TUF Gaming X570-PLUS GPU: GTX 980 RAM: 32 GB 3200 MHz Chassi: R4 PSU: Corsair AX860 Hörlurar: SteelSeries 840 Mus: Logitech G502 Lightspeed V.v. nämn eller citera mig för att få svar.

Permalänk
Medlem

Om du kollar upp dokumentation för nextSibling så ser du följande:

Citat:

Gecko-based browsers insert text nodes into a document to represent whitespace in the source markup. Therefore a node obtained, for example, using Node.firstChild or Node.previousSibling may refer to a whitespace text node rather than the actual element the author intended to get.

Med andra ord, har du mellanslag eller ny rad mellan elementen så får du med nextSibling en referens till en textnod istället. Lösningen finns också på samma sida:

Citat:

Element.nextElementSibling may be used to obtain the next element skipping any whitespace nodes.

P.S. Jag hade ingen aning om det här då jag började se på koden, och ändå tog det bara några minuter att fundera ut. Har du felsökt alls? Vet du hur man skriver ut saker t.ex. till console? .console.log("Meddelande"); skriver ut till developer console, som du får upp i t.ex. Chrome med F12, och tabben Console.

Skulle du t.ex. ha skrivit ut värdet på elMsg skulle du ha märkt att den ibland är null, och således kunna kommit på att det är den metoden det är fel på.

Permalänk
Skrivet av Tazavoo:

Om du kollar upp dokumentation för nextSibling så ser du följande:

Med andra ord, har du mellanslag eller ny rad mellan elementen så får du med nextSibling en referens till en textnod istället. Lösningen finns också på samma sida:

P.S. Jag hade ingen aning om det här då jag började se på koden, och ändå tog det bara några minuter att fundera ut. Har du felsökt alls? Vet du hur man skriver ut saker t.ex. till console? .console.log("Meddelande"); skriver ut till developer console, som du får upp i t.ex. Chrome med F12, och tabben Console.

Skulle du t.ex. ha skrivit ut värdet på elMsg skulle du ha märkt att den ibland är null, och således kunna kommit på att det är den metoden det är fel på.

Ja ja jag löste problemet. Bara undrade varför det löste problem
Men jag tror jag förstår nu tack!

Permalänk
Skrivet av Haptic:

function checkLength(e, minLength){ var el, elMsg; if(!e){ e=window.event; } el = e.target || e.srcElement; elMsg = $("#feedback"); if(el.value.length<minLength){ elMsg.html('Username must be ' + minLength + ' characters or more'); } else{ elMsg.html(""); } }

sådär fungerar det för mig. la en selector på feedback diven, och bytte "innerhtml =" till funktionen "html()"

Tack för hjälp!