How to pass parameters to function using buttons

Question

I have several buttons that use the same implementation but need to pass a different parameter to the function. This if for an mp3 player for context. My idea should be easy to follow, but I cannot get the syntax to work. Hope someone can help.

The button in HTML:

<input id="songToPlay" type="button" value="Click To Play!"/>

Then the javascript onclick call:

document.getElementById('songToPlay').onclick = playSongByThisBand;

The method playSongByThatBand():

function playSongByThisBand() {
    playSongByAnyBand(theIntegerThatRepresentsThisBand);
}

The method playSongByAnyBand(parameter):

function playSongByAnyBand(anIntegerThatRepresentsABand) {
    currentSongIndex=anIntegerThatRepresentsABand;
    //other implementation ect...
}

An alternative approach I tried is:

function playSongByAnyBand(anIntegerThatRepresentsABand) {
    currentSongIndex=anIntegerThatRepresentsABand;
    someObject = function() {other implementation ect...}
}

var functionIWantToExecutre = new playSongByAnyBand(anIntegerThatRepresentsABand)

functionIWantToExecute.someObject();

I cannot get playSongByAnyBand to execute. I could implement each button separately but that is even more redundant that my approach already. Can anyone help me with the syntax to implement multiple buttons this way?

The button that gets pressed needs to inform the function by passing an argument. It looks like I can pass the argument from the HTML tag. — lefunction
– lefunction, Commented Mar 18, 2015 at 5:28

Andrei · Accepted Answer · 2015-03-18 04:40:43Z

1

By Javascript

<input type="button" value="Play" onclick="playSong('param1')" />

function playSong(param) {
    // do something
}

With jQuery

<input type="button" value="Play" id="btnPlay" data-param="param1" />

$("#btnPlay").click(function() {
    var param = $(this).data("param");
    // do something
});

edited Mar 18, 2015 at 4:40

answered Mar 18, 2015 at 4:35

Andrei

44.9k39 gold badges163 silver badges228 bronze badges

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

Comments

HBP · Accepted Answer · 2015-03-18 04:56:50Z

In your button specify the band as a data attribute :

<input id="songToPlay" 
       type="button" 
       value="Click To Play!"
       data-band="bandName" />

The in your event handler yoiu can fetch it thus :

function playSong (ev) {
   var song = this.id;
   var band = this.getAttribute ('data-band');

   // .. put your play code for band/song rght here

}

Another way of accessing the data-band attribute is using the dataset a relatively new HTML feature now available on most current browsers.

function playSong (ev) {
   var song = this.id;
   var band = this.dataset.band; // Fetches attribute 'data-band'

   // .. put your play code for band/song rght here

}

You can add as many data-xxx attributes as you like for different infos. Each is a string value.

Collectives™ on Stack Overflow

How to pass parameters to function using buttons

2 Answers 2

By Javascript

With jQuery

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

By Javascript

With jQuery

Comments

Comments

Related