PHPで人が描かれているボタンを押すと値段が変わるシステムを作っています。
人が描かれているボタンを押すと背景を青色にして現在選択されているケースを表したいのですが
押すと一瞬だけ青色に変わってすぐに元通りになってしまいます。
自己で調べてみてわかったこと
しらべてみてわかったことは先にjavascriptの処理がされてからphpの処理がされているようで
echoで表示したhtmlの設定に戻されているようです
どうやらphpの処理を先にしてしまえば、この問題を解決できそうなのですがどうやったら、javascriptよりもさきにphpの処理を終わらせてjavascriptを動かせばよいのでしょうか
該当のソースコード(一部省略)
php
1 2 if(!isset($_SESSION)){ 3 session_start(); 4 } 5 if(isset($_SESSION['id'])){ 6 $DBManager = new DBManager(); 7 $Data = $DBManager->getUserInfoTblByUserID($_SESSION['id']); 8 if(isset($_POST['logout'])){ 9 logout(); 10 } 11?> 12<html> 13<head> 14 <meta http-equiv="Content -Type" content="text/html;charset=UTF-8"> 15 <title>完了画面</title> 16 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 17 <script type="text/javascript" src="js/main.js"></script> 18 <link rel="stylesheet" href="css/main.css"> 19</head> 20<body> 21 <form method="post" action="main.php"> 22 <table id="pr"> 23 <?php 24 for($i = 1; $i <= 5; $i++){ 25 echo "<tr id='line" . $i . "'>"; 26 echo "<td id='people" . $i . "' class='people'><button type='submit' id='select' name='rate' value='" . ($i-1) . "'><img src='" . $imgsrc[$i-1] . "'></button></td>"; 27 for($j = 1; $j <= 5; $j++){ 28 $index = ($i-1) * 5 + $j; 29 if(isset($_POST['rate'])){ 30 switch($_POST['rate']){ 31 case 0: 32 $sumprice[$index-1] = $price[$index-1]; 33 $ticket = 1; 34 break; 35 case 1: 36 $sumprice[$index-1] = $price[$index-1] * 2; 37 $ticket = 2; 38 break; 39 case 2: 40 $sumprice[$index-1] = $price[$index-1] * 3; 41 $ticket = 3; 42 break; 43 case 3: 44 $sumprice[$index-1] = $price[$index-1] + floor($price[$index-1] / 20) * 10; 45 $ticket = 2; 46 break; 47 case 4: 48 $sumprice[$index-1] = $price[$index-1] * 2 + floor($price[$index-1] / 20) * 10; 49 $ticket = 3; 50 break; 51 case 5: 52 $sumprice[$index-1] = $price[$index-1] + floor($price[$index-1] / 20) * 10 * 2; 53 $ticket = 3; 54 break; 55 case 6: 56 $sumprice[$index-1] = floor($price[$index-1] / 20) * 10; 57 $ticket = 1; 58 break; 59 case 7: 60 $sumprice[$index-1] = floor($price[$index-1] / 20) * 10 * 2; 61 $ticket = 1; 62 break; 63 default: 64 $sumprice[$index-1] = 333; 65 $ticket = 1; 66 break; 67 } 68 }else{ 69 $sumprice[$index-1] = $price[$index-1]; 70 $ticket = 1; 71 } 72 echo "<td id='price" . $index . "' class='price'><button type='button'>" . $sumprice[$index-1] . "</button></td>"; 73 } 74 echo "</tr>"; 75 } 76 ?> 77 </table> 78 </form> 79 </div> 80</body> 81</html> 82<?php 83 }else{ 84 header('Location: login.php'); 85 } 86?>
javascript
1$(function(){ 2 //クリックした時 3 $('#select').click(function(){ 4 $(this).addClass('active'); 5 }); 6});
css
1.active { 2 background-color: blue; 3}
追記*phpとjavascriptは同じファイルに書き込まれています(一部省略)
php
1<?php 2for($i = 1; $i <= 5; $i++){ 3 echo "<tr id='line" . $i . "'>"; 4 echo "<td id='people" . $i . "' class='people'><button type='button' class='select active' name='rate' value='" . ($i-1) . "' onclick='ratechange(" . ($i-1) . ")'><img src='" . $imgsrc[$i-1] . "'></button></td>"; 5 for($j = 1; $j <= 5; $j++){ 6 if(){ 7 switch(){値段計算のため省略} 8 }else{} 9 echo "<td id='price" . $index . "' class='price'><input type='button' id='prva" . $index . "' value='" . $sumprice[$index-1] . "'></td>"; 10 } 11} 12 13?> 14
javascript
1$(function(){ 2 //クリックした時 3 var price = <?php echo json_encode($price); ?>; 4 var sumprice = <?php echo json_encode($sumprice); ?>; 5 var img = $('.select'); 6 function ratechange(rc){ 7 console.log('通った' + rc); 8 for(var i=0; i<25; i++){ 9 switch(rc){ 10 case 0: 11 sumprice[i] = price[i] * 1; 12 break; 13 case 1: 14 sumprice[i] = price[i] * 2; 15 break; 16 case 2: 17 sumprice[i] = price[i] * 3; 18 break; 19 case 3: 20 sumprice[i] = price[i] * 1 + Math.floor(price[i] / 20) * 10; 21 break; 22 case 4: 23 sumprice[i] = price[i] * 2 + Math.floor(price[i] / 20) * 10; 24 break; 25 case 5: 26 sumprice[i] = price[i] * 1 + Math.floor(price[i] / 20) * 10 * 2; 27 break; 28 case 6: 29 sumprice[i] = Math.floor(price[i] / 20) * 10; 30 break; 31 case 7: 32 sumprice[i] = Math.floor(price[i] / 20) * 10 * 2; 33 break; 34 default: 35 sumprice[i] = 666; 36 37 break; 38 } 39 40 $("#prva" + i + "").val = sumprice[i]; 41 } 42 img.removeClass('active'); 43 $(this).addClass('active'); 44 } 45 46});
エラー
ReferenceError: ratechange is not defined at HTMLButtonElement.onclick
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/11/15 07:06
2018/11/15 07:16
2018/11/15 09:26
2018/11/15 09:31
2018/11/16 03:12
2018/11/16 04:37
2018/11/21 12:42
2018/11/28 03:04
2018/11/29 03:57
2018/11/29 04:12