CODEWITHSUNDEEP
javascripthtmlbutton
user3155063
user3155063

Reputation: 13

Calling a Javascript only with the button class

I am new to Javascript and also new to this Website.

I have about 40 Buttons which are all in the class "foo". I also have a Javascript function named "run". How can I set the Javascript to run whenever one of the buttons in class "foo" is pressed without actually setting the button to run it?

Is this even Possible?

Upvotes: 0

Views: 3976

Answers (6)

Josh Beam
Josh Beam

Reputation: 19772

Yes. Here is an example using jQuery.

$('.foo').click(function() {

    run();

});

OR, using plain old JavaScript (see the jsfiddle):

          //generates a "NodeList" of all buttons
var foo = document.getElementsByTagName('button'),
          //then, we turn it into an actual array
    foo = Array.prototype.slice.call(foo);

foo.forEach(function(button) {

    //check to see if that button has the class "foo"
    if(button.classList.contains('foo')) {
        button.onclick = function() {
             return run();   
        };
    }

});

function run() {
    console.log('run');   
}



You could use

getElementsByClassName

but the downside of that, is that the only version of IE in which it is supported is 9+ (including all other major browsers), which is fine, if that's what you decide to go with.

Upvotes: 3

Mike Trpcic
Mike Trpcic

Reputation: 25659

There are 3 simple ways to accomplish this.

First, you can just use plain vanilla Javascript. No external libraries are required.

// Get all buttons
var buttons = document.getElementsByClassName('foo');

// Loop through the buttons
for(var i = 0; i < buttons.length; i++){
    // Tell each button that when it is clicked, call the "run" function.
    buttons[i].onclick = run;
}

Second, You can specify the onclick methods in your HTML. This is a bad approach as it forces you to define global methods (functions that are accessible from anywhere), and also ties your code with your markup, making it hard to change one without changing the other.

<!-- Old HTML -->
<button class="foo">Text</button>

<!-- New HTML -->
<button class="foo" onclick="run()">Text</button>

Lastly, You can include the very helpful jQuery library to handle it for you. jQuery provides an easy way to handle binding events, selecting elements, etc.:

// One line (deconstruction below)
//  $(".foo")    => Find me all elements with a class name of "foo"
//  .on("click", => When those elements are clicked
//  run);        => Call the "run" method.
$(".foo").on("click", run);

The last approach, using jQuery has become the sort of de facto standard way of doing this.

Upvotes: 1

Robert
Robert

Reputation: 2282

I would use jQuery, for example:

$('.foo').click(function(){
        run();
});

it is simpler to program. However, without using jQuery:

var buttons = document.getElementsByClassName('foo');


function run(){
    alert('hi');
}

for(var i = 0; i < elements.length; i++){
    buttons[i].onclick = function() { run() };
}

Upvotes: 0

Alex Shilman
Alex Shilman

Reputation: 1547

Try this:

var run = function(){
 //your function goes here
}

$(document).on('click', '.foo', run);

Upvotes: 0

Jeff B
Jeff B

Reputation: 30099

Without jQuery:

var foos = document.getElementsByClassName('foo');

for (var i=0; i<foos.length; i++) {
    foos[i].onclick = function() { run() };
}

JSFiddle: http://jsfiddle.net/8AKeP/

Upvotes: 1

Deryck
Deryck

Reputation: 7658

Live Demo

You can copy + paste this right into your code and should work perfectly.

var buttons = document.getElementsByClassName('foo');
for (var i = 0; i < buttons.length; i++) {
    addEvent(buttons[i], 'click', run);
}

function addEvent(element, myEvent, fnc) {
    return ((element.attachEvent) ? element.attachEvent('on' + myEvent, fnc) : element.addEventListener(myEvent, fnc, false));
};

Upvotes: 1

Related Questions