JavaScript onclick method, attach it to All Buttons

Question

I have quite a few buttons that look like this in my html code

<li>
        <span class="avatar"><span class="status online"></span></span>
        <spa">

And this is my javascript function for myFunction()

var buttonState = 0;

function myFunction(){
    cons
        buttonState = 1;
        return;
    }
    if(buttonState == 1){
        buttonState = 0;
    }
}

Since I have multiple buttons, I cant just do onclick="myFunction()" for all of them because there is no way to tell between the id of the buttons AKA they are all of ID "addFriend" so the myFunction() will always default to the first button. There has to be a way to remedy this but i've researched it any found no good help guides. Anyone have a suggestion?

Thanks!

Answer 1

Add a "this" inside your parentheses:

<li>
    <span class="avatar"><span class="status online"></span></span>
    <span class="username">Barack Brobama</span>
    <input type="button" id="addFriend" onclick="myFunction(this)" class="submit" value="+ Add friend">

Now do this:

function myFunction(pObject){
  console.log(buttonState);
  if(buttonState == 0){
    pObject.value = 'Friend Request Pending';
    buttonState = 1;
    return;
  }
  if(buttonState == 1){
    pObject.value = '+ Add Friend';
    buttonState = 0;
  }
}

Answer 2

Use this for function

onclick="myFunction(this)"

then you function will be

   function myFunction(pObject){          
      console.log(pObject.getAttribute('state'));
      if(pObject.getAttribute('state') == '1'){
        pObject.value = '+ Add Friend';
        pObject.setAttribute('state', '0');
      }else{
        pObject.value = 'Friend Request Pending';
        pObject.setAttribute('state', '1');
      }
    }

and sate you can save in tag