スキルテスト: イベント

下記の問題の中には、 DOM を操作するコードを書くことを求められるものがあります。例えば、新しい HTML 要素を作成し、そのテキストコンテンツが特定の文字列値と等しくなるように設定し、ページ上の既存の要素の中にその要素を入れるというようなことです。すべて JavaScript を使用します。

このコースの中ではまだ明確に教えていませんが、この API を使用する例をいくつか見ていると思いますので、問題にうまく答えるためにはどのような DOM API が必要なのかを調べてみてください。私たちの文書の操作チュートリアルが良い出発点になるでしょう。

イベント関連の最初の課題では、ボタン（btn）がクリックされたときにボタン内のテキストを変化させ、再度クリックされたときに元に戻す単純なイベントハンドラーを作成する必要があります。

HTML は変更しないでください。 JavaScript のみを変更してください。

下記のライブコードを更新して、完成例を再現してみてください。

さて、キーボードイベントを見ていきましょう。この評価に合格するには、キーボードの WASD キーが押されたときに指定されたキャンバスの周りを円が移動するイベントハンドラーを作る必要があります。円は関数 drawCircle() で描画します。関数 drawCircle() は以下の引数を入力として受け取ります。

• x — 円の X 座標。
• y — 円の Y 座標。
• size — 円の半径。

下記のライブコードを更新して、完成例を再現してみてください。

イベント関連の次の課題では、<button> の親要素 (<div class="button-bar"> ... </div>) にイベントリスナーを設定する必要があります。このイベントリスナーは、いずれかのボタンをクリックしたときに呼び出され、button-bar の背景をボタンの data-color 属性に格納されている色に設定します。

すべてのボタンをループして、それぞれのボタンに自分自身でイベントリスナーを与えることなく、この問題を解決してください。

下記のライブコードを更新して、完成例を再現してみてください。