2

I have a piece of javascript is meant to add an onclick event to a div.

The div looks like this:

<div id="deck0" class="deck"></div>

And my javascript has:

var i = 1;
document.getElementById('deck0').SetAttribute("onclick", "begin("+i+")");   

But I get this error:

Uncaught TypeError: Object #<HTMLDivElement> has no method 'SetAttribute' 

Am I doing it right, or is what I am trying to achieve not possible?

4 Answers 4

8

Don't use setAttribute to set listeners, not all browsers allow that. Much better to either set the property directly:

document.getElementById('deck0').onclick = begin;

or use addEventListener:

document.getElementById('deck0').addEventListener('click', begin, false);

If you need to pass a parameter, then:

document.getElementById('deck0').onclick = function() {begin(i);};

similarly for addEventListener.

Note that earlier versions of IE don't support addEventListener so you will need a cross–browser function to feature test for support. Where lacking, test for attachEvent and fall back to the direct property method. Search for "addEvent" functions, there are plenty of examples.

Sign up to request clarification or add additional context in comments.

4 Comments

Setting the onclick property is part of DOM 0, so it works in every browser that supports javascript, right back to Navigator 2 and IE 3. Setting the property is great if you only have one listener (which is the vast majority of cases), you need to be a little more clever when adding multiple listeners.
Okay thanks RobG :) Also if im adding an onclick via html method <div onclick=""> does that work the same way or is that the attribute method with limited support?
Setting inline listeners (i.e. the attribute in the markup) is fine and supported everywhere, just keep them concise.
here's an example of the cross-browser way for adding an event listener: stackoverflow.com/a/1724445/56829
4

Javascript is case-sensitive.
That should be setAttribute.

Comments

0

There are other ways to associate a function to the onclick event :

function deck0_onclick() {
    begin(i);
}

document.getElementById('deck0').onclick = deck0_onclick;

Or directly :

document.getElementById('deck0').onclick = function() {begin(i);}

Comments

0

Javascript is case-sensitive, you'd need to write it lowercase.

Apart from that, to set event listeners no attributes should be used. This would need a string to be evaluated each time - you can do better from a script. Instead, assign a function to the onclick property:

document.getElementById('deck0').onclick = function(event) {
    begin(1);
};

Advanced event registration would be even better, but is more complex because Microsoft lacks supporting the standard.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.