How to change text of buttons after clicking on them for multiple buttons?

Question

I am using multiple buttons and my problem is when i am clicking on any button then the text changes of first button, but not that button on which i am clicking. I am using here same button id for all buttons but it is hard to use different button id's for such multiple buttons so what is any other simple way without using different id's. I want to change only one button at a time on which i am clicking but not other buttons. PLEASE HELP..!

html code

user1
<input type="button" value="Connect" id="toggle" onclick="myFunction()">
user2
<input type="button" value="Connect" id="toggle" onclick="myFunction()">
user3
<input type="button" value="Connect" id="toggle" onclick="myFunction()">

and so on...

and js function is

function myFunction()
    {
        var change = document.getElementById("toggle");
        if (change.value=="Connected") change.value = "Connect";
        else change.value = "Connected";
    }

Id, should be unique. Look at this answer to get a clue on how to do it. http://stackoverflow.com/questions/4825295/javascript-onclick-to-get-the-id-of-the-clicked-button — ecarrizo, Dec 08 '16 at 19:27

score 2 · Accepted Answer · answered Dec 08 '16 at 19:36

You can do it like this as well? You can change your onclick events as follows:

Change onlick functions to this: onclick ="myFunction(this)"

And Update your javascript function to be like the following:

function myFunction(obj) {
    if (obj.value == "Connected")
        obj.value = "Connect";
    else
        obj.value = "Connected";
}

score 1 · Answer 2 · answered Dec 08 '16 at 19:33

1

You cant use same Id for multiple elements. Simply you can use class instead of Id. Then your code will look like that :

$(".toggle").click(function(){}
    $(this).text("Whatever");
})

answered Dec 08 '16 at 19:33

Sagar Jajoriya

21
4

How to change text of buttons after clicking on them for multiple buttons?

2 Answers2