複数クラスのJavascript onclickイベントハンドラ

複数のクラスがある場合、クラス名をクリックして関数を呼び出すにはどうすればよいですか？私のコードでは、私は1つをクリックするたびに関数を呼びたいクラスボックスが9つあります。複数クラスのJavascript onclickイベントハンドラ

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Tic Tac Toe Game</title> 
 
    <style> 
 
    * { 
 
     margin: 0; 
 
     padding: 0; 
 
    } 
 
    #container { 
 
     width: 303px; 
 
     margin: 0 auto; 
 
     margin-top: 40px; 
 
    } 
 
    h1 { 
 
     text-align: center; 
 
     margin-bottom: 15px; 
 
    } 
 
    /*#wrapper { 
 
\t \t \t margin: 0 auto; 
 
\t \t }*/ 
 
    .col { 
 
     float: left; 
 
     margin: 0 auto; 
 
    } 
 
    .col > div:nth-child(-n+1) { 
 
     border-bottom: 1px solid #000; 
 
    } 
 
    .col > div:nth-child(-n+2) { 
 
     border-bottom: 1px solid #000; 
 
    } 
 
    .col > div { 
 
     border-right: 1px solid #000; 
 
    } 
 
    .col:last-child { 
 
     border-right: none; 
 
     border: 1px solid red; 
 
    } 
 
    #wrapper.col * { 
 
     border-right: none; 
 
    } 
 
    .reset { 
 
     clear: both; 
 
    } 
 
    .box { 
 
     width: 100px; 
 
     height: 100px; 
 
     background-color: grey; 
 
     font-size: 80px; 
 
     text-align: center; 
 
    } 
 
    body { 
 
     font-size: 80%; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div id="container"> 
 
    <h1>Tic Tac Toe</h1> 
 
    <div id="wrapper"> 
 
     <div class="col"> 
 
     <div class="box"></div> 
 
     <div class="box"></div> 
 
     <div class="box"></div> 
 
     </div> 
 
     <div class="col"> 
 
     <div class="box"></div> 
 
     <div class="box"></div> 
 
     <div class="box"></div> 
 
     </div> 
 
     <div class="col"> 
 
     <div class="box"></div> 
 
     <div class="box"></div> 
 
     <div class="box"></div> 
 
     </div> 
 
     <div class="reset"></div> 
 
    </div> 
 
    </div> 
 
    <script> 
 
    var turnsArray = []; 
 

 
    function player() { 
 
     alert("hello"); 
 
    } 
 

 
    var el = document.getElementsByClassName('box'); 
 
    el.onclick = player; 
 
    </script> 
 
</body> 
 

 
</html>

出典

2016-05-05 Nevelle

getElementsByClassName戻りHTMLCollection、ない単一の要素、あなたはそれに直接イベントハンドラをアタッチすることはできません。
あなたは、各要素のイベントのイベントハンドラをこのコレクションを反復処理し、設定する必要があります：あなたは直接にはforEachメソッドを呼び出すことはできませんので

items = document.getElementsByClassName('box'); 
[].forEach.call(items, function (el) { 
    el.addEventListener('click', player); 
});

HTMLCollectionは、適切な配列ではないですが、あなたはのforEachを呼び出すことができますそれを配列に渡してコレクションを渡します。

出典

2016-05-05 02:08:16

elは、各上のonclickリスナーを反復して設定する必要がありますので、ES6であなたは、単に[...el]によって配列にHTMLCollectionを変換することができ、HTMLCollectionを与え、そのコードは次のようになります。

var el = document.querySelectorAll('.box'); 
[...el].forEach(e => e.onclick = player)

Fiddle Demo

出典

2016-05-05 02:13:26 mido

私はES6の構文に精通していない人たちの答えを明確にするべきだと思います。 –

@AlexeyUkolovが更新されました。私は小さな記法を思いつくことができると知っていました:) – mido

[ブラウザのサポート]（http://kangax.github.io/compat-table/es6/#test-spread_（...）_operator）forスプレッドは驚くほど良く、イベントは矢印機能より優れています。 –

[] .sliceは、呼び出しの結果を新しい配列に変換するために使用されます。したがって、forEachを使用することができます。

var el = document.getElementsByClassName('box'); 
    el_arr = [].slice.call(el); 
    el_arr.forEach(function(obj,i){ 
    obj.addEventListener("click",function(){ 
     player(); 
     }); 
    });

出典

2016-05-05 03:42:50

複数クラスのJavascript onclickイベントハンドラ

答えて

関連する問題