javascript: set onclick function with a parameter for a button

Question

I have created a button using javascript and now I want to give it a onclick. however I want the function to have a parameter i. the problem is that when I inspect the console the onclick function is just onclick=playAudio(i). I want it to be different for each value of i in the for loop, but because it is in brackets it just stays as i instead of the current number in the for loop. I hope I have explained this properly. some of the code is below to help you understand.

var i;
var audioMp3 = ["audio/Un", "audio/Deux", "audio/Trois", "audio/Quatre", "audio/Cinq", "audio/Six", "audio/Sept", "audio/Huit", "audio/Neuf", "audio/Dix"];

for(i = 0; i < audioMp3.length; i++{
    var audioBtn = document.createElement("BUTTON");
    audioBtn.setAttribute("onclick", "playAudio(i);";
}

Just use right concatenation audioBtn.setAttribute("onclick", "playAudio("+i+");" — Artsrun Hakobyan
– Artsrun Hakobyan, Commented Jul 21, 2017 at 6:58

Farhad Bagherlo · Accepted Answer · 2017-07-21 07:02:42Z

3

var audioMp3 = ["audio/Un", "audio/Deux", "audio/Trois", "audio/Quatre", "audio/Cinq", "audio/Six", "audio/Sept", "audio/Huit", "audio/Neuf", "audio/Dix"];

for(var i = 0; i < audioMp3.length; i++){
    var node = document.createElement("BUTTON");
    var textnode = document.createTextNode(audioMp3[i]);
    node.appendChild(textnode);
    node.setAttribute("onclick", "playAudio("+i+");");
    document.getElementById("element").appendChild(node);
}
function playAudio(i){
alert(i);
}

<div id="element"></div>

answered Jul 21, 2017 at 7:02

Farhad Bagherlo

6,6993 gold badges30 silver badges49 bronze badges

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

Comments

Akiro · Accepted Answer · 2017-07-21 06:59:39Z

2

I'm pretty sure that this should work :

audioBtn.setAttribute("onclick", "playAudio("+i+");");

answered Jul 21, 2017 at 6:59

Akiro

418 bronze badges

Comments

Kevin Bui · Accepted Answer · 2017-07-21 07:01:12Z

0

audioBtn.onclick = function(){ playAudio(i) }

answered Jul 21, 2017 at 7:01

Kevin Bui

5243 silver badges10 bronze badges

Comments

Raymond Seger · Accepted Answer · 2017-07-21 07:02:54Z

0

Create an array with all the possible values, loop through the values to create the buttons, each button should have their click event listener to play their own button's song.

I don't know your precise code but that is the pseudo-code to do it.

answered Jul 21, 2017 at 7:02

Raymond Seger

1,1305 gold badges18 silver badges37 bronze badges

Collectives™ on Stack Overflow

javascript: set onclick function with a parameter for a button

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related