Q&A
（質問文は編集できます）質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
javascript初心者です。
現在ドットインストールでjavascriptを学習中なのですが
以下の入力をboxをクリックした時ののボックス色と回転のアニメーションが発生しません。
ディベロッパーツールでコンソールを確認しましたがエラーもありませんでした。
初歩的な質問で申し訳ございませんが回答よろしくお願いします。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>javascript</title> <style> .box { width: 100px; height: 100px; background-color: skyblue; cursor: pointer; transition: 0.8s; } .circle { background: pink; border-radius: 50%; transform:rotate(360deg) ; } </style> </head> <body> <div class="box" id="target"></div></script> </body> </html><script> 'use strict'; document.getElementById('target').addEventListener('chick',() => { // document.getElementById('target').style.background = 'pink'; // document.getElementById('target').style.borderRadius = '50%'; document.getElementById('target').classList.add('circle') });
早速のコメントありがとうございます。
すみません、変更いたしました。
こちらの環境では変更／修正が確認できませんでした。すみませんが、もう一度確認してもらえませんか？最近teratailで修正が保存されない事がたまにあるようなので･･･。
「javascript 初級」というタイトルには要件が何も入っていません。
「初心者」を言いたいのでしたら「初心者アイコン」がありますし、「JavaScript」はタグにあります。
それにアニメーション云々は初級ではないと思いますけど（基準は何？）
回答2件
0
イベント「chick」は標準イベントではないのでそのコードだと実行はされません。
適切なタイミングに変更するか先へ進めて発火させる記述が出てくるのを待ちましょう
投稿2020/03/01 08:35
退会済みユーザー
総合スコア0
0
ベストアンサー
addEventListenerを使うために必要な基本的な知識を書きますので、参考にしてください。
addEventListenerの第一引数にはイベント名を書きます。
Javascriptが扱うことのできるイベントは、 JavaScript イベントハンドラ一覧 に書かれています。
質問のプログラムでaddEventListenerの第一引数に'chick'と書いたのは、何が起きた時を指定したかったからのでしょうか？
その'何が起きた'に対応するイベントが一覧表にあるなら、それを第一引数にすることで問題が解決します。
あるいは、クリックされた時を指定しようとしたのだけれど、"onClick"を"chick"と打ち間違えたのではないですか？ それなら、訂正してください。
投稿2020/03/01 09:22
総合スコア6915
ボックス色が変わらないのは、色を変えるコード "document.getElementById('target').style.background = 'pink';"がコメントアウト（"//"を先頭に加えてコードをコメントに変えることで、そのコードが実行されなくすること）されているから。
あなたの回答
tips
プレビュー
