phpで掲示板の実装・jsでいいねボタンの実装

実現したいこと

phpで掲示板を実装し、投稿されたコメントにはjsで実装したいいねボタンを付けたいです。
(いいねボタンの回数制限はなし)

発生している問題・分からないこと

掲示板といいねボタンが押されると各コメントごとに回数が増えていくところまでは実装しました。

しかし、リロードをした際にクリック回数がリセットされてしまうので、ローカルストレージでクリック回数を保存して対応しようと思ったのですが、count[i]のような変動値を複数保存する記述が分かりませんでした。

該当のソースコード

index.php

1/* 2index.phpには「投稿内容一覧」と「投稿フォーム」を表示 3★テーブル情報 4 name : 投稿者名 5 created_at : 日付 6 message : 投稿内容 7*/ 8 9try { 10 $pdo = 'DB接続の記述'; 11 $sql = "SELECT * FROM net"; 12 13 $stmt = $pdo->prepare($sql); 14 $stmt->execute(); 15 }catch (PDOException $e) { 16 $msg = '接続失敗'; 17 } 18 19 20//「class="count-txt"」にいいね回数表示 21foreach($stmt as $row) { 22 echo '<p>ID:' . $row['id'] . '-' . $row['name'] . '-' . $row['created_at'] . '</p>'; 23 echo '<p>' . $row['message'] . '</p>'; 24 echo '<button id="js-good-btn" type="button"><span class="count-txt"></span>いいね</button>'; 25} 26 27 28<form action="insert.php" method="post"> 29 お名前<input type="text" name="name"><br> 30 投稿内容<textarea name="message"></textarea> 31 <input type="submit" name="insert" value="投稿"> 32</form>

insert.php

1//投稿完了画面 2$pdo = 'DB接続の記述'; 3 4if(empty($_POST['name'] === null)) { 5 $_POST['name'] = '名無し'; 6} 7 8$sql = "INSERT INTO net(name , message) 9 VALUES(:name , :message)"; 10 11$stmt = $pdo->prepare($sql); 12 13$stmt->bindValue(':name' , $_POST['name'] , PDO::PARAM_STR); 14$stmt->bindValue(':message' , $_POST['message'] , PDO::PARAM_STR); 15 16$stmt->execute();

script.js

1let goodBtn = document.querySelectorAll('.js-good-btn'); 2let countTxt = document.querySelectorAll('.count-txt') 3 4let count = {}; 5 6for(let i = 0; i < goodBtn.length; i++) { 7 count[i] = 0; 8 btnAll[i].addEventListener('click' , (e) => { 9 count[i] ++; 10 countTxt[i].textContent = count[i]; 11 }); 12}

試したこと・調べたこと

上記の詳細・結果

forのiに左右されてどうにもうまくいきませんでした。

補足

特になし

コメントを投稿

0 コメント