JavaScriptでいいねボタンを作りたい

前提・実現したいこと

Webページ上でメモを記録できるサイトにJavaScriptでいいねボタンを作っています。
(保存できるような実用的なものではなく、あくまで擬似的なものです。)
フォームに入力した内容を投稿ボタンを押すといいねボタンを合わせて表示するものです。
またjQueryなどのライブラリは使用しません。

（フォームに「あああああ」と入力し投稿ボタンをクリック、いいねボタンを６回クリックした画面です）

現在、いいねボタンを設置し、１回クリックするごとに横の数字を増やしていくところまでプログラムを作ったのですが、
新しく投稿をすると、それ以前の投稿にいいねがつけられなくなってしまいます。

例）
![]
（新しく「いいいいい」と投稿し、いいねボタンを２回押したものです）

新しく投稿したものより前の投稿にもいいねボタンを押した際に数を増やしたいです。

発生している問題・エラーメッセージ

この状態で「あああああ」の方の投稿にいいねを押してもいいねの数が増えません。
上の「例）」の状態では直前に投稿したものにしかいいねを押した回数が反映されません。

該当のソースコード

JavaScript
1function textcopy() {
2  var textarea = document.getElementById("textarea").value;
3  document.getElementById("textarea").value = "";
4  var counter = 0;
5  textarea = "<div class='frame'>" + "<p class='memo'>" + textarea + "</p>" +
6    "<button type='button' + class='far fa-thumbs-up' id='goodbutton'>" +
7    "いいね" + "</button>" + "<a id='clicks'>" + counter + "</a>" +
8    "</div>" + document.getElementById("insert").innerHTML;
9  document.getElementById("insert").innerHTML = textarea;
10  document.getElementById("goodbutton").onclick = function() {
11    counter += 1;
12    document.getElementById("clicks").innerHTML = counter;
13  }
14}
15

html
1<html>
2
3<head>
4  <meta charset="UTF-8" />
5  <title>JavaScript Test</title>
6  <link rel="stylesheet" href="~" />
7  <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
8  <script src="~.js"></script>
9</head>
10
11<body>
12  <h1>メモが追加できます</h1>
13  <form>
14    <textarea id="textarea" rows="4" cols="40" placeholder="次のメモ"></textarea>
15    <button type="button" onclick="textcopy()">投稿</button>
16  </form>
17  <hr>
18  <div id="insert">
19  </div>
20</body>
21
22</html>
23

試したこと

毎回投稿をするたびに変数を増やすべきなのか、class名を取得すればできるのかわかりません。
最近JavaScriptを勉強し始めた初心者なので、稚拙な質問かもしれませんが、どうかご教授ください。

不測な情報があればすぐに追記いたします。

yambejp

2020/06/26 13:09

一人で何度もいいねを押せるのは普通はまずいですが、あくまでもテストということで実装していいのですね？

Alex_M

2020/06/26 13:21

大丈夫です。 Youtubeやインスタグラムのいいね機能のようなものは今回目的としていません！

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

回答2件

ベストアンサー

getElementById() を getElementsByClassName() にしてもおそらく質問者様のやりたいことはできないかと思われます。
getElementsByClassName()で取得したデータは複数存在する可能性があるので配列で帰ってきて、例えば

document.getElementsByClassName("insert")[0]

のように指定する必要が出てくるからです。（[0]を[1]にすると次の"insert"をClassとして指定した要素をターゲットにします。for、もしくはforeachで全対象に処理するならこちらで可能ですが対象特定が割と面倒です）

自分で同じ仕組みを（保存を考慮しない＝DB等を使わずに完全にブラウザ上で完結する前提で）作成するとしたら、
記事を生成する際に記事毎にidを変え、見えない（display: none;等を指定した）<input type="text">をおいてその中で数字をもたせて、「いいね」を増やすためのonclickイベントの際にはidとinputのtextを持っていくよう処理を実装すればできるかと。あんまりスマートではないですが
（保存は想定していないってことは組み方練習で大丈夫ですよね……？）

投稿2020/06/26 13:44