Question

67

Handling onclick event with pure JavaScript

rated 0 times [ 71] [ 4] / answers: 1 / hits: 101642 / 11 Years ago, sat, july 13, 2013, 12:00:00

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/

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

dorothylorrainef

Add To Favorites

Follow

Total Points: 456

Total Questions: 102

Total Answers: 115

Location: El Salvador

Member since Sun, Sep 12, 2021

3 Years ago

answered 11 Years ago austonjuancarlosb · Accepted Answer

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