使用onClick获取javascript中单击按钮的ID

Question

Iam swaping the values of the button and the .innerHTML of the buttons as well, but doing it in a in-efficient way . Like this :

function btnswap2()
{

    var soft=document.getElementById('1');
    var hard=document.getElementById('2');

    var temp;
    var temp1;
    var flag=0;

    if(soft.id==1)
        {
            temp1=soft.innerHTML;
            soft.innerHTML=hard.innerHTML;
            hard.innerHTML=temp1;

            temp=soft;
            soft=hard;
            hard=soft;

            showHARD();
        }
}

Now can i get the id of the button clicked in run-time, as you can see that the buttons get swapped every time i click the button. Issue is i have to call some other function as here(in this case if it is hard then it should be hard else soft should be called)

  showHARD();
  showSOFT();

How can i achieve this ??? my butn id are as follows: BTN : ID

 SOFT: 1
 HARD: 2
 TRAI: 3
 STAT:4 

Answer 1

Try adding a class to the static button:

<button id="1" >button1</button>
<button id="2" >button2</button>
<button id="3" >button3</button>
<button id="4" class="static" >button4</button>

Then with jQuery:

$(document).ready(function(){
 $("button").click(function(){

  if($(this).hasClass("static")){
   showSTAT();
  }else{
   btnswap2(this); 
   if($(this).attr("id")=="1")
    showSOFT();
   else if($(this).attr("id")=="2")
    showHARD();
   else
    showTRAI();
  }
 });
});


function btnswap2(btn){

var stat=$('button.static');

var temp;

temp=btn.html();
btn.html(stat.html());
stat.html(temp1);

stat.removeClass("static");
btn.addClass("static");
}

Don't call showSOFT() or showHARD() in the btnswap2() function!

In this way you will get always the static button and it will swap only if the button swapped is not static.

Answer 2

I guess what you would like to do is something like this:

HTML

--------
static:
--------
<div id="1" >button A</div>

--------
live:
--------
<div id="2" onClick="btnswap2(this.id)">button B</div>
<div id="3" onClick="btnswap2(this.id)">button C</div>
<div id="4" onClick="btnswap2(this.id)">button D</div>

JavaScript

function btnswap2(id){
    var temp = document.getElementById("1").innerHTML; // static button
    var clicked_label = document.getElementById(id).innerHTML;
    document.getElementById("1").innerHTML = clicked_label;
    document.getElementById(id).innerHTML = temp;
}

Fiddle is here : http://jsfiddle.net/n5UDu/6/

Hope this helps.