web-dev-qa-db-ja.com

異なる機能にリダイレクトする同じ機能で複数のボタンを使用する

だから..私はこれを行う方法がわからない数日間この問題を抱えています、そして私は助けが必要です。

複数のボタンがあり、それらすべてをクリックすると同じ機能にリダイレクトされ、その機能からそのボタンに指定された別の機能に移動します。どのボタンがクリックされたかを知って、どうすれば真のいくつかの機能を実行できますか？例：

 <html>

<button type="button" onclick="myFunction()" id="1">Button1</button>
<button type="button" onclick="myFunction()" id="2">Button1</button>
<button type="button" onclick="myFunction()" id="3">Button1</button>

<script>

function myFunction()
{
   var x=0;

    if (button 1){
     x=1;
     myFunction1(x);}

   if (button 2){
    x=2;
    myFunction2(x);}

    if (button 3){
     x=3;
     myFunction3(x);}

     ...
    myFunction3(x){
    alert(x);
}
}

</script>

</html>
javascripthtmlfunctionbutton
7
sritno

最も簡単な方法は、おそらく要素を関数に渡すことです。

<button type="button" onclick="myFunction(this)" id="1">Button1</button>
<button type="button" onclick="myFunction(this)" id="2">Button1</button>
<button type="button" onclick="myFunction(this)" id="3">Button1</button>

function myFunction(elem) {
    alert(elem.id);
}

イベントの引数などについて考える必要はありません。

18
Joe Enos

最も単純なもの：

_<button type="button" onclick="myFunction(this)" id="1">Button1</button>
<button type="button" onclick="myFunction(this)" id="2">Button1</button>
<button type="button" onclick="myFunction(this)" id="3">Button1</button>

function myFunction (button) {
    var x = button.id;
    switch (x) {
        case '1':
            myFunction1(x);
            break;
        case '2':
            myFunction2(x);
            break;
        case '3':
            myFunction3(x);
            break;
        default:
            return false;
    }
}
_

JS Fiddle demo 。

控えめなJavaScriptを使用するように上記を修正しますが、JavaScriptのイベント処理を要素のHTMLマークアップから移動します。

_var buttons = document.getElementsByTagName('button');
for (var i = 0, len = buttons.length; i < len; i++) {
    buttons[i].onclick = function (){
        myFunction (this);
    }
}
_

JS Fiddle demo 。

または、さらに簡単にするために（そして、イベント処理を3つではなく1つの要素に追加する）：

_function myFunction (event) {
    var x = event.target.id;
    console.log(event.target, x);
    switch (x) {
        case '1':
            myFunction1(x);
            break;
        case '2':
            myFunction2(x);
            break;
        case '3':
            myFunction3(x);
            break;
        default:
            return false;
    }
}

var parent = document.getElementById('parentElementID');
parent.addEventListener('click', myFunction);
_

JS Fiddle demo 。

ちなみに、（HTML 5ではnotHTML 4では）数字で始まるidを持つことは有効ですが（0 -9）、CSSでは、これらの要素をターゲットにすることは困難です（先頭の数字は、さまざまな方法のいずれかでエスケープする必要があります）。したがって、これらのidsの前に予測可能なアルファベットのプレフィックスを付けることをお勧めします。

参照：

14
David Thomas

HTMLを変更できる場合は、次を試してください。

<button type="button" onclick="myFunction(1)" id="1">Button1</button>
<button type="button" onclick="myFunction(2)" id="2">Button1</button>
<button type="button" onclick="myFunction(3)" id="3">Button1</button>

そして、JSを次のように変更します。

function myFunction(bnum)
{
   var x=0;

    if (bnum == 1){
     x=1;
     myFunction1(x);}

   if (bnum == 2){
    x=2;
    myFunction2(x);}

    if (bnum == 3){
     x=3;
     myFunction3(x);}
}

スイッチの方が少しいいです：

function myFunction(bnum)
{
   var x=0;
   switch (bnum) {
      case 1:
          x = 1;
          myFunction1(x);
      break;
      case 2:
          x = 2;
          myFunction1(x);
      break;
      case 3:
          x = 3;
          myFunction1(x);
      break;
   }
}
0
Grim...

あなたが置くことができます

var button = document.getElementsByTagName("button"),
    len = button.length,
    i;
function click(){
  alert(this.id);
}
for(i=0;i<len;i+=1){
  button[i].onclick=click;
}
<button type="button" id="1">Button1</button>
<button type="button" id="2">Button1</button>
<button type="button" id="3">Button1</button>
0
alessandrio