JavaScriptの変数に入れた値を、同一ファイル内のPHPの変数で受け取りたいです

実現したいこと

ECサイトを作っています。レビューをデータベースに保存するために次の処理を実現させたいです。

５つの星マークがあり、１つ目の星をクリックするとPHPの変数＄valueに１が入り、2つ目の星をクリックするとPHPの変数＄valueに２が入る。同様に３、４、５も同じ要領で動作するようにしたいと考えています。

現在、以下のプログラムのようにロジックを考えており、星をクリックするとJavaScriptの変数valueに数値が代入されるとういう状況です。この状態から、PHPの変数$valueに数値を受け渡す方法は何かありますでしょうか。

また、上記の方法以外でこれを実現する方法があれば教えていただけないでしょうか。

該当のソースコード

PHP
1<?php
2
3$value = //JavaScriptから値を受け取る処理をしたい
4
5?>
6<!DOCTYPE html>
7<html lang="ja">
8  <head>
9    <meta charset="UTF-8" />
10    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
11    <title>アップロードフォーム</title>
12    <link rel="stylesheet" href="css/product.css">
13  </head>
14
15  <body>
16    <div class="star-box-a">
17        <div class="star-inner-box">
18            <img src="./img/icon/no fill star.png" alt="NoImage" class="star_a">
19            <img src="./img/icon/no fill star.png" alt="NoImage" class="star_b">
20            <img src="./img/icon/no fill star.png" alt="NoImage" class="star_c">
21            <img src="./img/icon/no fill star.png" alt="NoImage" class="star_d">
22            <img src="./img/icon/no fill star.png" alt="NoImage" class="star_e">
23        </div>
24    </div>
25
26    <script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
27
28    <script>
29      const star_a = document.querySelector('.star_a');
30      const star_b = document.querySelector('.star_b');
31      const star_c = document.querySelector('.star_c');
32      const star_d = document.querySelector('.star_d');
33      const star_e = document.querySelector('.star_e');
34
35      //初期状態からボタンが押された時
36      star_a.addEventListener('click', () => {
37          var value = 1;
38      })
39      star_b.addEventListener('click', () => {
40          var value = 2;
41      })
42      star_c.addEventListener('click', () => {
43          var value = 3;
44      })
45      star_d.addEventListener('click', () => {
46          var value = 4;
47      })
48      star_e.addEventListener('click', () => {
49          var value = 5;
50      })
51    </script>
52    
53  </body>
54</html>
55
56
57
58
59
60

miyabi_takatsuk

2023/01/31 04:38

すでに回答の方で出ておりますが、 PHPと、JavaScript（ブラウザ上動作するほう）では、動作のタイミングなどが違います。よく、サーバーサイド（PHP）、とクライアントサイド（JS）と言われる話です。 JavaScriptの実行ができるようになった段で、PHPの実行はもう終えており、同ファイル内のPHP処理は基本的にはもうされません。（すでに回答がある通り、JSでリロードさせてなんらかの方法で情報を更新すれば、できるかも）別PHPにPOSTなりして、サーバーサイドのPHP処理をさせる方法が一番いいかと。