Handling "onclick" event with pure JavaScript

This is really straight forward but I'm still fairly new to JavaScript and just found JSFiddle. I'm trying to find the element with the getElementById() to disable and enable a button. What am I missing?

<form name="frm" > 
  <div id="chkObj"> 
    <input type="checkbox" name="setChkBx" onclick="basicList.modifyAndEnableButton(this)"></input>        
</div>
<div id="Hello"> 
    <input type="button" name="btn" value="Hello"></input>        
  </div>
</form>

This is a list that I am using to add checkboxes because there is going to be more than one:

 var basicList = {
    'items': {},
    'modifyAndEnableButton': function(obj1) {
        var element = document.getElementsByName("btn");
        if (obj1.checked == true && element.getAttribute('disabled') == false) {
            element.getAttribute('disabled') = true;
            this.addRecord(obj2);
        } else if (element.getAttribute('disabled') == true) {
            if (hasItems == false) {
                element.getAttribute('disabled') = false;
            }
        } 
    }
};

http://jsfiddle.net/Arandolph0/E9zvc/3/

Solution 1:

All browsers support this (see example here):

mySelectedElement.onclick = function(e){
    //your handler here
}

However, sometimes you want to add a handler (and not change the same one), and more generally when available you should use addEventListener (needs shim for IE8-)

mySelectedElement.addEventListener("click",function(e){
   //your handler here
},false);

Here is a working example:

var button = document.getElementById("myButton");
button.addEventListener("click",function(e){
    button.disabled = "true";
},false);

And html:

<button id='myButton'>Hello</button>

(fiddle)

Here are some useful resources:

• addEventListener on mdn
• The click event in the DOM specification
• Click example in the MDN JavaScript tutorial

Solution 2:

Benjamin's answer covers quite everything. However you need a delegation model to handle events on elements that were added dynamically then

document.addEventListener("click", function (e) {
    if (e.target.id == "abc") {
        alert("Clicked");
    }
});

For IE7/IE8

document.attachEvent('onclick', function (e) {
    if (window.event.srcElement == "abc") {
        alert("Clicked");
    }
});

Solution 3:

You have a Error here

btnRush should be Rushbtn

This is a example of cross browser event's I just made (not tested) )

var addEvent = function( element, type, callback, bubble ) { // 1
    if(document.addEventListener) { // 2
        return element.addEventListener( type, callback, bubble || false ); // 3
    }
    return element.attachEvent('on' + type, callback ); // 4
};



var onEvent = function( element, type, callback, bubble) { // 1
    if(document.addEventListener) { // 2
        document.addEventListener( type, function( event ){ // 3
            if(event.target === element || event.target.id === element) { // 5
                callback.apply(event.target, [event]); // 6
            }
        }, bubble || false);
    } else {
        document.attachEvent( 'on' + type, function( event ){ // 4 
            if(event.srcElement === element || event.srcElement.id === element) { // 5
                callback.apply(event.target, [event]); // 6
            }
        });
    }

};

Steps

1. Create a function that accepts 4 values ( self explaining )
2. Check if the browser supports addEventListener
3. Add event on the element
4. else add event on the element for older IE
5. Check that the (clicked) element is = to the passed element

6. call the callback function pass the element as this and pass the event

   The onEvent is used for event delegation. The addEvent is for your standard event.

   here's how you can use them

The first 2 are for dynamically added elements

onEvent('rushBtn', 'click', function(){
    alert('click')
});

var rush = document.getElementById('rushBtn');

onEvent(rush, 'click', function(){
    alert('click');
});

// Standard Event
addEvent(rush, 'click', function(){
    alert('click');
});

Event Delegation is this basically.

Add a click event to the document so the event will fire whenever & wherever then you check the element that was clicked on to see if it matches the element you need. this way it will always work.

Demo