0

I am learning event handlers and doing these exercises from the JavaScript and jQuery book by Jon Duckett. I am using Firefox, but tried it in Chrome too.

This is the function that does work and is using HTML event handler, if I understand correctly:

function checkUsername() {
    var elMsg = document.getElementById("feedback");
    var elUsername = document.getElementById("username");
    if (elUsername.value.length < 5) {
        elMsg.innerHTML = "Not long enough";
    } else {
        elMsg.innerHTML = "";
    }
}

This is the DOM event handler, which I understand is safer, and it doesn't work, and I can't figure out why:

function checkUsername() {
    var elMsg = document.getElementById("feedback");
    if (this.value.length < 5) {
        elMsg.innerHTML = "Not long enough";
    } else {
        elMsg.innerHTML = "";
    }
}

var el = document.getElementById("username");
el.addEventListener("blur", checkUsername, false);

This is the HTML markup:

<!DOCTYPE html>
<html>

<head>
    <title>Events</title>
    <link rel="stylesheet" href="css/06.css" />
    <script type="text/javascript" src="js/event.js"></script>
</head>
<form method="post" action="http://www.example.org/register">
    <label for="username">Create a username: </label>
    <input type="text" id="username" onblur="checkUsername()" />
    <div id="feedback"></div>
    <label for="password">Create a password: </label>
    <input type="password" id="password" />
    <input type="submit" value="Sign up!" />
</form>
</body>

</html>

Actually all the examples from events on, from page 253 on (event-handler, you can find everything on its website) don't work ... I looked if JavaScript is enabled and it is, when I typed javascript.enabled in about:config. Can anyone help me why this is not working?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
  • The markup above is completely invalid. Nothing can be between the `` and `` tags. In addition, depending on what browser and version of that browser you're using you may need additional code. Older verisons of IE used `.attachEvent()` as oppose to `.addEventListener()`.. – War10ck Sep 08 '15 at 17:18
  • @War10ck: Actually, it's valid (but I'm sure it's not intentional, and I wouldn't recommend it). The starting `` tag is *optional*, [per specification](http://www.w3.org/TR/html5/syntax.html#optional-tags), when you have content like that. – T.J. Crowder Sep 08 '15 at 17:20
  • 1
    And you looked at the console, and it said....? –  Sep 08 '15 at 17:20
  • @T.J.Crowder My mistake, I overlooked the fact that that was the closing body tag and not the opening body tag. Thanks for the correction. Agree with you for sure though. Definitely wouldn't recommend that syntax. – War10ck Sep 08 '15 at 17:21
  • Fix your input id to "username" without any spaces instead of – Sagi Sep 08 '15 at 17:22
  • @Sushil Your "validating" of the _HTML_ destroyed all the _IDs_ and probably fixed half of the other problems the OP had causing this problem (attribute on ` – Paul S. Sep 08 '15 at 17:22
  • Thank you for the correction .. and yes, it was not done intentionaly, i have deleted and replaced code so many times that I just forgot to check ... anyway ..it still doesn't work, even If I put in ... –  Sep 08 '15 at 17:25
  • @psiha: The reason is given in the [question and answer that torazaburo pointed to](http://stackoverflow.com/questions/1829925/javascript-getelementbyid-not-working): You're looking up the element before it exists, and so it's not found. Move the `script` to the *end*, just before the closing `

    ` tag. Putting `script` elements in the `head` is an anti-pattern.

     – T.J. Crowder Sep 08 '15 at 17:28
  • oh I thought that was just a typo @PaulS. – Sushil Sep 08 '15 at 17:32
  • i was still using label id, instead of label for ... even if i wrote here correctly ... seemed i didn't see the typo .. thank you all for your quick help thou. much appreciated :) –  Sep 08 '15 at 18:13

0 Answers0