【HTML】【JavaScript】でボタンをクリック→「クリック時の時間＋テキスト」を表示する機能が作りたい。

前提・実現したいこと

Html,JSで出勤、退勤を確認するようなシステムを作っています。
詳しく言うと、
出勤ボタンをクリックするとtextareaに「クリックしたときの時間＋出勤」と表示され、
退勤ボタンをクリックするとtextareaに「クリックしたときの時間＋退勤」と表示される機能です。
しかし今までこのような機能を実装したことがなく実装することができません。

なお、ボタンを何度クリックしても無限にテキストが表示されるようにしたいです。
](3984436a44dd5ee8741b85996fc8840e.jpeg)

kei344

2020/06/14 09:03

【質問するときのヒント｜teratail（テラテイル）】 https://teratail.com/help/question-tips 【推奨していない質問｜teratail（テラテイル）】 https://teratail.com/help/avoid-asking

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

回答1件

おおざっぱに、作ってみました。参考になれば幸いです。
https://codepen.io/new1ro/pen/vYLKdwB

HTML
1<div class="flex">
2  <div class="btn-group">
3    <button type="button" id="btn-01">出勤</button>
4    <button type="button" id="btn-02">退勤</button>
5  </div>
6  <div class="text-group">
7    <div class="text-item">
8      <span class="time" id="text-01"></span>
9      <span class="label">出勤</span>
10    </div>
11    <div class="text-item">
12      <span class="time" id="text-02"></span>
13      <span class="label">退勤</span>
14    </div>
15  </div>
16</div>

CSS
1.flex {
2  display: flex;
3}
4.btn-group button {
5  display: block;
6}
7
8/* 時間 (.time) が空の場合、その弟要素(.label) を透明にする。 */
9/* 最終的にはJavaScriptで.activeなどのクラスを付与する、などの実装が望ましい */
10.text-item > .time:empty + .label {
11  opacity: 0;
12}

JS
1// 出勤ボタンをクリックしたときの処理
2document.getElementById('btn-01').addEventListener('click', event => {
3  // 現在の日時を取得
4  var now = new Date();
5  
6  var month = now.getMonth() + 1;
7  var day = now.getDate();
8  var time = now.getHours() + ':' + now.getMinutes();
9  
10  // テキストの内容を更新
11  document.getElementById('text-01').innerText = month + '/' + day + ' ' + time;
12});
13
14// 退勤ボタンをクリックしたときの処理
15document.getElementById('btn-02').addEventListener("click", event => {
16  // 現在の日時を取得
17  var now = new Date();
18  
19  var month = now.getMonth() + 1;
20  var day = now.getDate();
21  var time = now.getHours() + ':' + now.getMinutes();
22  
23  // テキストの内容を更新
24  document.getElementById('text-02').innerText = month + '/' + day + ' ' + time;
25});