CODEWITHSUNDEEP
javascripthtml
JVE999
JVE999

Reputation: 3517

Event Listener Property not functioning properly

I have a few links that are links through JavaScript. The first one was working, and I just copied the code and changed the names, but the second one is not working. I've looked at it and it's exactly the same as the one prior, which works, so I don't know what's going on.

HTML: 

    <a id="Home">Home</a> &nbsp&nbsp||&nbsp&nbsp

    <a href="account.php">Hamburger7</a> &nbsp&nbsp||&nbsp&nbsp

    <a id="Logout">Logout</a>

</div>

JavaScript:

<script>
    var Home_Link = document.getElementById("Home");
    Home_Link.addEventListener('click', Home, true);

    function Home() {
        window.location.href = "index.php";
    }

    var Login_Link = document.getElementById("Login");
    Login_Link.addEventListener('click', Login, true);

    function Login() {
    window.location.href = "-login.php";
    }

    var Logout_Link = document.getElementById("Logout");
    Logout_Link.addEventListener('click', Logout, true);

    function Logout() {
        window.location.href = "logout-redirect.php";
    }


</script>

I've edited it to include the reason for the problem (I didn't think it was a problem) and I've found the problem. Could someone tell me why it's a problem?

The problem is that putting the code:

var Login_Link = document.getElementById("Login");
Login_Link.addEventListener('click', Login, true);

function Login() {
    window.location.href = "-login.php";
}

Before the last bit of code prevents the last bit of code from running. I'm assuming it's because there's no id named "Login" in this version of the page. Why does it do that and what's a way to prevent that?

Upvotes: 0

Views: 76

Answers (2)

nnnnnn
nnnnnn

Reputation: 150030

"It turns out, the script is hanging at the document.getElementById() where the ID does not exist...If someone could explain exactly why it hangs at an unfound ID, that would be enlightening"

The getElementById() function returns null if no element is found with the specified id. That is not in itself an error and doesn't cause the script to crash. The following line:

var Login_Link = document.getElementById("Login");

..."works" in the sense that it doesn't crash, but if there is no element with that id then Login_Link is set to null, so then when you try to do this:

Login_Link.addEventListener('click', Login, true);

...it is like saying:

null.addEventListener('click', Login, true);

And that gives you TypeError: Cannot call method 'addEventListener' of null. Note that this (or a similar) error message would be displayed in your browser's console, which you can see by pressing F12 in Chrome and IE, or ctrl-shift-k in FF.

If your page is set up in such a way that the element might not be there then you just need to test for null:

var Login_Link = document.getElementById("Login");
if (Login_Link != null) {
    Login_Link.addEventListener('click', Login, true);
}

Note that for the code you've shown there should be no need to use JavaScript at all - if the only thing your click event handlers do is set window.location.href to some address then you might as well just lose the JS and set href="index.php" (or whatever address) in the anchor elements.

Even if you intend to do something more complicated in your JavaScript click handler, I'd still suggest at least setting href="#" (or href="javascript:void(0)" if you feel you must), because anchor elements that have an href attribute are usable from the keyboard - that is, users who can't or don't use a mouse or other pointing device can tab to the anchor and "click" it by pressing enter.

Upvotes: 1

Mark
Mark

Reputation: 6855

your second link has no id attribute:

<a href="account.php">Hamburger7</a> &nbsp&nbsp||&nbsp&nbsp

and your script is expecting an id attribute:

var Login_Link = document.getElementById("Login");
Login_Link.addEventListener('click', Login, true);

function Login() {
    window.location.href = "-login.php";
}

so, change the link, and ad an id attribute:

<a href="account.php" id="login">Hamburger7</a> &nbsp&nbsp||&nbsp&nbsp

Upvotes: 0

Related Questions