事后得到唯一的身份证？

Question

I want to be able to change a button image on click which isn't the issue. Each button is unique to information that is pulled from the database and on click the button should change and send the appropriate info to the database. What I am unsure about is how I can change the specific button. Say there are five things up, so five buttons. Each button has its unique id to go with its information. How can I find out what the id is so that I can manipulate the button?

I use php to grab the info from the database and go through a while loop to get it all displayed. Once it is all displayed it is there for the user to see and then they can click on the button.

edit - It just came to me. I can make my onclick function take a variable and feed the variable into it. Right?

Answer 1

A simple trick actually. Call a function on the click and pass its id, to it as a parameter.

<button id="id1" onClick="handleclick(this.id)">Button1</button>
<button id="id2" onClick="handleclick(this.id)">Button2</button>

<script>
function handleclick(id)
{
    alert(id); //here is your id
}
</script>

Demo

---

Alternative

You can do something like this also

buttons = document.getElementsByTagName("button");
for( var x=0; x < buttons.length; x++ ) {
    buttons[x].onclick = handleclick;
}

Demo 2

Answer 2

Same idea as Starx, but alternative style:

<button id="id1">Button1</button>
<button id="id2">Button2</button>

<script>
    function handleclick() {
        alert(this.id); //here is your id
    }

    document.getElementById("id1").onclick = document.getElementById("id2").onclick = handleclick;
</script>

Answer 3

Just for the sake of argument - how to do it without javascript onclicks making your HTML look untidy, etc.

Add you event listeners in JavaScript in the HTML head or an include file, all wrapped in a document ready function, so avoiding javascript in your HTML body. Something like:

window.onload = function(){
 for (i=1;i<=10;i++){ //assuming you'll never have more than 10 buttons
      var el = document.getElementById('id' + i);
      if (el != null){ //set click event handler if button exists
           document.getElementById('id' + i).addEventListener('click', handleClick, false);
      }else{
           break; //stop looking when a button doesn't exist.
      }
 }
};

You could do that less hackishly using the form object rather than getElementById, but you hopefully get my point.