addEventListenerを使用し、マウスオーバーすると表示されている文字が変わるようにしたい

JavaScript初学者です。
どうしても下記の課題がわからないのでどうすればいいか教えて欲しいです。
途中までやってみたのですが、ここからどうすればいいかがわかりません。
できれば答えも知りたいです。よろしくお願い致します。

「日付取得」というボタンにマウスカーソルが重なったら、「ボタンにマウスカーソルが重なったらこの文章部分が今日の日付に変わるようにして、離れたら元の表示に戻してね！」という文章が今日の日付に変更され、カーソルを話したら表示が元に戻るようなプログラムを作成してください。この際に年月日をそれぞれ取得できるメソッドを使用して表示させるようにしてください。（例）2021年8月11日

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta http-equiv="X-UA-Compatible" content="IE=edge">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <title>practice</title>
8</head>
9<body>
10  <p>
11    <input type="button" id="button3" value="日付取得">
12    <div id="form-text2">ボタンにマウスカーソルが重なったらこの文章部分が今日の日付に変わるようにして、離れたら元の表示に戻してね！</div>
13  </p>

javascript
1 <script>
2    let hoverevent = document.getElementById("button3");
3    function sample3() {
4      
5    }
6    hoverevent.addEventListener("mouseover",sample3)
7  </script>
8</body>
9</html>

m.ts10806

2021/11/23 20:11

「課題」なのであればこれまで学んだことで解決可能ではないでしょうか。

行動規範の内容に同意します

回答1件

ベストアンサー

課題ということなので、ヒントだけ。

javascript
1let hoverevent = document.getElementById("button3");
2let text2 = document.getElementById("form-text2");
3let originalText = text2.textContent; // 元の文章
4
5// マウスが重なった時に呼ばれる関数
6function sample3() {
7    text2.textContent = "yyyy年mm月dd日"; // 今日の日付を設定するやり方は調べて下さい
8}
9
10// マウスが離れたときに呼ばれる関数
11function sample4() {
12    text2.textContent = originalText; // 元の文章を設定
13}
14
15hoverevent.addEventListener("mouseover", sample3);   // マウスが重なった時のイベント
16hoverevent.addEventListener("mouseleave", sample4);  // マウスが離れたときのイベント
17