Unobtrusive Javascript onclick

Asked 13/4, 2013 at 12:20 Answered 8/7, 2014 at 11:38

I was recently reading on Unobtrusive javascript and decided to give it a shot. Whether or not I decide to use this style is to be determined at a later time. This is just for my own curiosity and not for any time restricted project.

Now, I was looking at example code and a lot of the examples seem to be using, what took me forever to discover, jQuery. They use a function like $('class-name').whatever(...);

Well I rather like the look of $('class').function, so I tried to emulate it without using jQuery(as I don't know jQuery and don't care about it atm). I'm unable, however, to make this example work.

Here is my jsFiddle: http://jsfiddle.net/dethnull/K3eAc/3/

<!DOCTYPE html>
<html>
<head>
    <title>Unobtrusive Javascript test</title>
<script>
    function $(id) {
        return document.getElementById(id);
    }

    $('tester').onclick(function () {
        alert('Hello world');
    });
</script>
<style>
    .styled {
        width: 200px;
        margin-left: auto;
        margin-right: auto;
        font-size: 2em;
    }
    a {
        cursor: pointer;
        color: blue;
    }
    a:hover {
        text-decoration: underline;
    }   
</style>
</head>
    <body>
        <div class='styled'>
            <ul>
                <li><a id='tester'>CLICK ME</a></li>
            </ul>

         </div> 
     </body>
</html>

I was expecting an alert box to pop up when you click on the link, but doesn't seem to happen. When checking the console in chrome it gives this message "Uncaught TypeError: Cannot call method 'onClick' of null"

I'm not a javascript expert, so more than likely I'm doing something wrong. Any help is appreciated.

Barbet answered 13/4, 2013 at 12:20 Comment(0)

Try this code,

Script

function $(id) {
    return document.getElementById(id);
}

$('tester').addEventListener('click', function () {
    alert('Hello world');
});

When you console this $('tester') selector, it simply returns <a id='tester'>CLICK ME</a> which is a html element not an object so you cannot use onclick directly. Instead you have to use addEventListener or attachEvent to bind a click event

Demo JS http://jsfiddle.net/K3eAc/4/

Overlay answered 5/5, 2013 at 17:33 Comment(1)

Awesome! Thanks a lot, that worked out just fine for me. Also thanks for answer a question that was asked several weeks ago. I had almost forgot I asked it, lol. – Barbet 5/5, 2013 at 19:45

You don't need addEventListener or attachEvent: live demo.

The code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Unobtrusive Javascript test</title>
<style>
.styled {
    width: 200px;
    margin-left: auto;
    margin-right: auto;
    font-size: 2em;
}
</style>
</head>
<body>

    <div class="styled">
        <ul>
            <li><a href="#" id="tester">CLICK ME</a></li>
        </ul>
    </div>

<script>
var tester = document.getElementById('tester');
tester.onclick = function() {
    alert('Hello world');
}
</script>

</body>
</html>

.
I'm better in practice than in theory, but it would seem to me that with converting the targeted element into a variable, it becomes an object. Tested in IE8/9, Chrome25 and FF30.

Shrieve answered 8/7, 2014 at 11:38 Comment(0)

Try this

function $(id) {
    return document.getElementById(id);
}
var a = $('tester');
a.onclick = (function () {
    alert('Hello world');
});

Reference : https://developer.mozilla.org/en-US/docs/DOM/element.onclick

Autogamy answered 13/4, 2013 at 12:32 Comment(1)

I have that a shot, but the browser debugger is still saying it is a null value. I can't seem to figure out why it keeps returning null. – Barbet 13/4, 2013 at 12:57

Recommended topics

Hot tags