質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

1回答

1447閲覧

while文で複数表示したボタンについて。最初にクリックしたものは一回で反応するが、違うボタンを押した時は2回押さないと反応しない

fuyukixxx

総合スコア26

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/06/23 10:31

編集2022/01/12 10:55

掲示板ポートフォリオをつくっているものです。like機能を実装したくSQLから取得した投稿とユーザをwhile文でその分取得して同時にLikeボタンも表示させてクリックしたらボタンの色の切り替えと、Likeの情報を非同期でPOSTしてます。
うまくいかない動作として、タイトルの通り1回目ボタンをクリックした時は問題なく色が変わりPOSTさせることができますが、while文で複数作った他のボタンをクリックすると2回そのボタンをクリックしないと反応しないです。一回でボタンが反応するようにしたいです。
ご助力の方どうかよろしくお願いします。

PHP

1コード 2 $outLikes = $db->prepare('SELECT * FROM favorites WHERE account=? AND favorite="favorite"'); 3 $outLikes->execute(array($member['user'])); 4 $outLike = $outLikes->fetchAll(); 5 if (isset($_POST['favorite'])) { 6 $postLikes = $db->prepare('INSERT INTO favorites (favorite_id ,account, favorite) VALUES (?, ?, ?) ON DUPLICATE KEY UPDATE favorite = ?'); 7 $postLikes->bindParam(1, $_POST['favorite_id'], PDO::PARAM_INT); 8 $postLikes->bindParam(2, $_POST['user'], PDO::PARAM_STR); 9 $postLikes->bindParam(3, $_POST['favorite'], PDO::PARAM_STR); 10 $postLikes->bindParam(4, $_POST['favorite'], PDO::PARAM_STR); 11 $postLikes->execute(); 12 } 13 14 $user = $db->query('SELECT me.user, p.* FROM members me, posts p WHERE me.id=p.member_id ORDER BY p.created DESC'); 15 $posts = $user;

HTMLPHP

1コード 2 <?php if ($post['user'] !== $member['user']) :?> 3 <?php for ($i = 0; $i < count($outLike); $i++) :?> 4 <?php if ($outLike[$i]['favorite_id'] === $post['id'] && $outLike[$i]['favorite'] === 'favorite') :?> 5 <?php $icon = 'fas fa-thumbs-up'?> 6 <?php $boolean = 'hoge'?> 7 <?php break?> 8 <?php endif ;?> 9 <?php endfor; ?> 10<?php while ($post = $posts->fetch()) : ?> 11 <form id="like_form" action="" method="post"> 12 <span class="hidden_id" style="display: none;"><?php echo htmlspecialchars($post['id'], ENT_QUOTES)?></span> 13 <input type="hidden" name="user" value="<?php echo htmlspecialchars($member['user'], ENT_QUOTES) ?>"> 14 <?php if (isset($boolean)) :?> 15 <span class="hidden_boolean" style="display: none;">true</span> 16 <?php else :?> 17 <span class="hidden_boolean" style="display: none;">false</span> 18 <?php endif ;?> 19 </form> 20 <?php if (isset($icon)) :?> 21 <button class="like__btn"> 22 <span class="icon"><i class="<?php echo $icon?>"></i></span> 23 Like 24 </button> 25 <?php else :?> 26 <button class="like__btn"> 27 <span class="icon"><i class="far fa-thumbs-up"></i></span> 28 Like 29 </button> 30 <?php endif ;?> 31 <?php endif; ?> 32 <?php unset($icon); unset($boolean)?>

javascript

1コード 2 const likeBtn = document.querySelectorAll('.like__btn'); 3 const hidden_id = document.querySelectorAll('.hidden_id'); 4 const hidden_boolean = document.querySelectorAll('.hidden_boolean'); 5 let likeIcon = document.querySelectorAll('.icon'); 6 let clicked = null; 7 8for (let i = 0; i < likeBtn.length; i++) { 9 likeBtn[i].addEventListener('click', () => { 10 const postForm = new FormData(document.forms.like_form); 11 //カラムfavoriteだった場合true 12 if (hidden_boolean[i].textContent === 'true') { 13 clicked = true; 14 } 15 //likeおされてない場合 16 if (clicked === false) { 17 clicked = true; 18 likeIcon[i].innerHTML = `<i class="fas fa-thumbs-up"></i>`; 19 postForm.set('favorite_id', hidden_id[i].textContent); 20 postForm.set('favorite', 'favorite'); 21 const form = { 22 method: 'post', 23 body: postForm 24 }; 25 26 fetch('index.php', form) 27 .then((res) => { 28 if (res.status !== 200) { 29 throw new Error("system error."); 30 } 31 return res.text(); 32 }).then((text) => { 33 // console.log(text); 34 }).catch((e) => { 35 console.log(e.message); 36 }).finally(() => { 37 console.log('done!') 38 39 }); 40 } else { 41 clicked = false; 42 likeIcon[i].innerHTML = `<i class="far fa-thumbs-up"></i>`; 43 hidden_boolean[i].innerHTML = 'false'; 44 postForm.set('favorite_id', hidden_id[i].textContent); 45 postForm.set('favorite', 'notFavorite'); 46 const form = { 47 method: 'post', 48 body: postForm 49 }; 50 51 fetch('index.php', form) 52 .then((res) => { 53 if (res.status !== 200) { 54 throw new Error("system error."); 55 } 56 return res.text(); 57 }).then((text) => { 58 // console.log(text); 59 }).catch((e) => { 60 console.log(e.message); 61 }).finally(() => { 62 console.log('done!') 63 }); 64 } 65 }); 66 }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

S.Percentage

2021/06/23 10:51

clickイベントの中でconsole.log(i)を入れてiの値がどうなってるかって見れますか? JavaScriptの変数キャプチャって結構謎だった記憶があって、もしかしたらどのボタン押してもiの値が同じということがあるかもしれないです。 自分の思い違いで全部違う値だったとかだったら無視してください……
fuyukixxx

2021/06/23 12:08

返信ありがとうございます。 変数iの値は0、1、2... ループごとに+1になってます。。 クリックが一回で反映されないイメージで例えると、現在開いているブラウザ以外の所を操作してて、またブラウザに戻るとき一回クリックしないとそのブラウザを操作できない感じ?です。
guest

回答1

0

うーんなるほど、だとすると自分のは思い違いですね……失礼しました。

コード見てて気になったのは、clicked === falseのときにhidden_boolean[i].innerHTML='true';がないことですね。
これを入れないとclickedの値が変わらないのでは、と思うのですが、どうでしょうか?

投稿2021/06/23 12:16

S.Percentage

総合スコア283

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

fuyukixxx

2021/06/24 08:47

すみません。HTMLPHPのコードが抜けていました。条件分岐でデータベース側のfavoriteカラムがfavorite'だった場合$boolean変数に文字列代入。 <?php if ($outLike[$i]['favorite_id'] === $post['id'] && $outLike[$i]['favorite'] === 'favorite') :?> <?php $boolean = 'hoge'?> <?php endif ;?> $booleanに値があればtrue文字列を生成それをJS側のDOMで受け取り <?php if (isset($boolean)) :?> <span class="hidden_boolean" style="display: none;">true</span> <?php else :?> <span class="hidden_boolean" style="display: none;">false</span> <?php endif ;?> さらにJS側で分岐してます。 const hidden_boolean = document.querySelectorAll('.hidden_boolean'); //カラムfavoriteだった場合true if (hidden_boolean[i].textContent === 'true') { clicked = true; } clickedの値は変わってます。コード抜けててすみません。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問