実現したいこと
こんにちは。JavaScriptの勉強を独学でしている者です。
イベントハンドラの引数 e を使って、htmlのpタグ内のテキストを書き換えられるようにしたいです。
前提
pタグにカーソルを乗せると、pタグに挟まれたテキストが書き換えられるようにするため、
pタグにonmouseover属性を追加し、イベントハンドラを登録しました。
ところが、MicrosoftEdgeで画面表示してみると、下記のエラーが表示されてしまい、イベントハンドラを実行してくれません。
発生している問題・エラーメッセージ
Uncaught TypeError: Cannot read properties of undefined (reading 'target')
該当のソースコード
JavaScript
1<!DOCTYPE html>2<html>3 <head>4 <meta charset="UTF-8">5 </head>6 <style>7 p {8 background-color: aquamarine;9 }10 </style>11 <body>12 <h3>今日の朝ご飯</h3>13 <p onmouseover="morning()">白ご飯，目玉焼き</p>14 </body>15 <script> 16 const morning = function(e) {17 e.target.textContent = "食パン，ヨーグルト";18 console.log(e);19 };20 </script>21</html>
試したこと
- 16行目をコメントアウトして、17行目でEventオブジェクト e をコンソール表示させると、"undefined"と表示されてしまいました。
- onmouseover属性をonclick属性に変えても、同様のエラーメッセージが出てしまいます。
- JavaScriptのコードの実行タイミングが問題かと思い、scriptタグをbodyタグの前に置いてみましたが、Eventオブジェクトをコンソール表示結果はundefinedでした。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
0 コメント