teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問ボタン押す->phpで処理->javascriptで処理の流れをしたいです

編集履歴

質問編集履歴

7

現状説明

2021/11/14 21:16

投稿

TrueRyoB
TrueRyoB

スコア79

test CHANGED
File without changes
test CHANGED
@@ -8,6 +8,8 @@
8
8
 
9
9
  実行環境はMAMPです
10
10
 
11
+ 現在はミニマムコードで検証中です
12
+
11
13
 
12
14
 
13
15
  > jquery.min.js:2 jQuery.Deferred exception: $(...).on(...).fail is not a function TypeError: $(...).on(...).fail is not a function

6

コードと問題点の更新

2021/11/14 21:16

投稿

TrueRyoB
TrueRyoB

スコア79

test CHANGED
File without changes
test CHANGED
@@ -4,89 +4,289 @@
4
4
 
5
5
  jQueryを介して画面ロードなしでbottun -> js -> phpでdbからデータ回収 -> jsで計算　を実行しようとしてます。
6
6
 
7
- 現在phpファイルが動かないところで詰まっています
7
+ 現在jQueryの読み込み関係のエラーに詰まってます
8
-
9
- 詳しくは下のエラーを見ていただければと思います
10
8
 
11
9
  実行環境はMAMPです
12
10
 
13
11
 
14
12
 
13
+ > jquery.min.js:2 jQuery.Deferred exception: $(...).on(...).fail is not a function TypeError: $(...).on(...).fail is not a function
14
+
15
+ at HTMLDocument.<anonymous> (https://ryorar.tokyo/for_jquery.js:56:12)
16
+
17
+ at j (https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js:2:29999)
18
+
19
+ at k (https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js:2:30313) undefined
20
+
21
+ r.Deferred.exceptionHook @ jquery.min.js:2
22
+
23
+ jquery.min.js:2 Uncaught TypeError: $(...).on(...).fail is not a function
24
+
25
+ at HTMLDocument.<anonymous> (for_jquery.js:56)
26
+
27
+ at j (jquery.min.js:2)
28
+
29
+ at k (jquery.min.js:2)
30
+
31
+
32
+
15
33
  ### コード
16
34
 
17
35
 
18
36
 
19
-
20
-
21
-
22
-
23
- DB接続用コード(試験的)
37
+ DB接続呼びかけ用jsコード(for_jquery.js)
38
+
39
+ ```javascript
40
+
41
+
42
+
43
+ $(function(){
44
+
45
+ $('#innerHTMLtxt').on("click",function(){//idのボタンが押されたらこれが発動するらしい...onclickの進化系！
46
+
47
+ const atkId = new Option(document.getElementById("atkName").value);
48
+
49
+ const difId = new Option(document.getElementById("difName").value);
50
+
51
+
52
+
53
+ $.post({
54
+
55
+ url: 'find_value.php',//新しいphpファイルの名前にするよ
56
+
57
+ data:{'opt': 'connect_database','atkId':atkId, 'difId':difId},//わいの愛しのidちゃんたちを書いていく！！
58
+
59
+ dataType: 'json', //必須。json形式で返すように設定（テンションの差よ）（マジレスマン）（いいね正解大卒）
60
+
61
+ }).done(function(atkArray,difArray,weaponArray){
62
+
63
+ var atkAH= atkArray[0];
64
+
65
+ var atkAA= atkArray[1];
66
+
67
+ var atkAM= atkArray[2];
68
+
69
+ var atkAD= atkArray[3];
70
+
71
+ var atkAS= atkArray[4];
72
+
73
+ var atkBH= atkArray[5];
74
+
75
+ var atkBA= atkArray[6];
76
+
77
+ var atkBM= atkArray[7];
78
+
79
+ var atkBD= atkArray[8];
80
+
81
+ var atkBS= atkArray[9];
82
+
83
+ var atkSkill= atkArray[10];
84
+
85
+ var atkName= atkArray[11];
86
+
87
+ var atkVisu= atkArray[12];
88
+
89
+ var weapona_name= atkArray[13];
90
+
91
+ var weaponm_name= atkArray[14];
92
+
93
+ var spe_type= atkArray[15];
94
+
95
+ var spe_damage= atkArray[16];
96
+
97
+ var spe_num= atkArray[17];
98
+
99
+ var spe_name= atkArray[18];
100
+
101
+
102
+
103
+ var difAH= difArray[0];
104
+
105
+ var difAA= difArray[1];
106
+
107
+ var difAM= difArray[2];
108
+
109
+ var difAD= difArray[3];
110
+
111
+ var difAS= difArray[4];
112
+
113
+ var difBH= difArray[5];
114
+
115
+ var difBA= difArray[6];
116
+
117
+ var difBM= difArray[7];
118
+
119
+ var difBD= difArray[8];
120
+
121
+ var difBS= difArray[9];
122
+
123
+ var difSkill= difArray[10];
124
+
125
+ var difVisu= difArray[11];
126
+
127
+ var difName= difArray[12];
128
+
129
+
130
+
131
+ var weapona_dam= weaponArray[0];
132
+
133
+ var weapona_num= weaponArray[1];
134
+
135
+ var weaponm_dam= weaponArray[2];
136
+
137
+ var weaponm_attribute= weaponArray[3];
138
+
139
+ var weaponm_heal= weaponArray[4];
140
+
141
+
142
+
143
+ getValue(atkAH,atkAA,atkAM,atkAD,atkAS,atkBH,atkBA,atkBM,atkBD,atkBS,atkSkill,atkName,atkVisu,weapona_name,weaponm_name,spe_type,spe_damage,spe_num,spe_name,difAH,difAA,difAM,difAD,difAS,difBH,difBA,difBM,difBD,difBS,difSkill,difVisu,difName,weapona_dam,weapona_num,weapona_dam,weaponm_dam,weaponm_attribute,weaponm_heal);
144
+
145
+ //getValue関数に、入手したデータを送ります！
146
+
147
+ })
148
+
149
+ }).fail(function(XMLHttpRequest, textStatus, error){
150
+
151
+ alert(error);
152
+
153
+
154
+
155
+ })
156
+
157
+
158
+
159
+ })
160
+
161
+
162
+
163
+ ```
164
+
165
+ DB接続用コード(find_value.php)
24
166
 
25
167
  ```php
26
168
 
27
169
  <?php
28
170
 
171
+
172
+
29
- //ファイル名はfunction.phpです
173
+ $atkArray = array();//変数宣言　
174
+
30
-
175
+ $difArray = array();
176
+
177
+ $weaponArray = array();
178
+
31
- function get_txt_content($atk_name){//DB接続用関数です
179
+ $atkId = filter_input(INPUT_POST,"atkId"); //変数の出力
180
+
32
-
181
+ $difId = filter_input(INPUT_POST,"difId");
182
+
183
+
184
+
185
+
186
+
33
-
187
+ if( isset($atkId))//わんちゃんissetで変数を受け取った後関数を実行的なのができるかも
188
+
189
+ {
34
190
 
35
191
  try {
36
192
 
37
193
 
38
194
 
39
- // データベースに接続
40
-
41
- $pdo = new PDO(
42
-
43
- 'mysql:dbname=ryorar;host=127.0.0.1;charset=utf8mb4',
44
-
45
- 'viewers',
46
-
47
- 'Mypass1!',
48
-
49
- [
50
-
51
- PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
52
-
53
- PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
54
-
55
- ]
56
-
57
- );
58
-
59
-
60
-
61
- $stmt =$pdo->prepare('SELECT * FROM yokai_data WHERE id = :id');
62
-
63
- $stmt->bindValue(':id', $atk_name);
64
-
65
- $stmt->execute();
66
-
67
- foreach($stmt as $row)
68
-
69
- {
70
-
71
- $atkSkill = $row['skill_name'];
72
-
73
- }
74
-
75
-
76
-
77
- $atkSkill_json = json_encode( $atkSkill );
78
-
79
-
80
-
81
- return $atkSkill_json;//これでjsにデータ返却を試みます
82
-
83
-
84
-
85
- $pdo =null;
195
+ // データベースに接続
196
+
197
+ $pdo = new PDO(
198
+
199
+ 'mysql:dbname=ryorar;host=127.0.0.1;charset=utf8mb4',
200
+
201
+ 'viewers',
202
+
203
+ 'Mypass1!',
204
+
205
+ [
206
+
207
+ PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
208
+
209
+ PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
210
+
211
+ ]
212
+
213
+ );//今から、それぞれのカラム名つき、int指定込みで配列にデータを入れるコマンドを探す！締めはechoとexit!
214
+
215
+
216
+
217
+ //ここでは、アタッカーのyokai_dataDBから手に入る変数を入れる 1をpost atkIdに変える
218
+
219
+ $stmt =$pdo->prepare('SELECT * FROM yokai_data WHERE id = :id');
220
+
221
+ $stmt->bindValue(':id', $atkId);
222
+
223
+ $stmt->execute();
224
+
225
+ foreach($stmt as $row)
226
+
227
+ {
228
+
229
+ $atkStatus_a_h = (int)$row['status_a_h'];//dif
230
+
231
+ $atkStatus_a_a = (int)$row['status_a_a'];
232
+
233
+ $atkStatus_a_m = (int)$row['status_a_m'];
234
+
235
+ $atkStatus_a_d = (int)$row['status_a_d'];
236
+
237
+ $atkStatus_a_s = (int)$row['status_a_s'];
238
+
239
+ $atkStatus_b_h = (int)$row['status_b_h'];
240
+
241
+ $atkStatus_b_a = (int)$row['status_b_a'];
242
+
243
+ $atkStatus_b_m = (int)$row['status_b_m'];
244
+
245
+ $atkStatus_b_d = (int)$row['status_b_d'];
246
+
247
+ $atkStatus_b_s = (int)$row['status_b_s'];
248
+
249
+ $atkSkill = $row['skill_name'];//dif
250
+
251
+ $weapon_a = $row['weapon_a'];//none
252
+
253
+ $weapon_m = $row['weapon_m'];//none
254
+
255
+ $atkName = $row['yokai_name'];//dif
256
+
257
+ $atkVisu = $row['visu'];//dif
258
+
259
+ $spe_type = $row['spe_type'];//none
260
+
261
+ $spe_damage = $row['spe_damage'];
262
+
263
+ $spe_num = $row['spe_num'];
264
+
265
+ $spe_name = $row['spe_name'];
266
+
267
+ }
268
+
269
+ //データ読み込みを一部省略
270
+
271
+
272
+
273
+ $atkArray =array($atkStatus_a_h,$atkStatus_a_a,$atkStatus_a_m,$atkStatus_a_d,$atkStatus_a_s,$atkStatus_b_h,$atkStatus_b_a,$atkStatus_b_m,$atkStatus_b_d,$atkStatus_b_s,$atkSkill,$atkName,$atkVisu,$weapon_a,$weapon_m,$spe_type,$spe_damage,$spe_num,$spe_name);
274
+
275
+
276
+
277
+ $weaponArray =array($weapon_a_dam,$weapon_a_num,$weapon_m_dam,$weapon_m_attribute,$weapon_m_heal);
278
+
279
+
280
+
281
+ $difArray =array($difStatus_a_h,$difStatus_a_a,$difStatus_a_m,$difStatus_a_d,$difStatus_a_s,$difStatus_b_h,$difStatus_b_a,$difStatus_b_m,$difStatus_b_d,$difStatus_b_s,$difSkill,$difVisu,$difName);
282
+
283
+
284
+
285
+ $pdo =null;
86
286
 
87
287
 
88
288
 
89
- } catch (PDOException $e) {
289
+ } catch (PDOException $e) {
90
290
 
91
291
  header('Content-Type: text/plain; charset=UTF-8', true, 500);
92
292
 
@@ -94,35 +294,17 @@
94
294
 
95
295
 
96
296
 
97
- } catch (PDOException $e) {
297
+ }
98
298
 
99
299
 
100
300
 
101
- // エラーが発生した場合は「500 Internal Server Error」でテキストとして表示して終了する
102
-
103
- // - もし手抜きしたくない場合は普通にHTMLの表示を継続する
104
-
105
- // - ここではエラー内容を表示しているが， 実際の商用環境ではログファイルに記録して， Webブラウザには出さないほうが望ましい
106
-
107
- header('Content-Type: text/plain; charset=UTF-8', true, 500);
108
-
109
- exit($e->getMessage());
110
-
111
-
112
-
113
- }
114
-
115
-
116
-
117
301
  }
118
302
 
119
303
 
120
304
 
121
- $func = $_POST['func'];//jsから送られたデータで関数を実行させようとしてるところです
122
-
123
- $atkId = $_POST['argument'];
124
-
125
- echo $func($atkId);//前回echoコマンドの表記を忘れていたので変な感じになりましたが、送られたデータで関数実行というのは恐らくこのことだと思います
305
+ echo json_encode($atkArray,$difArray,$weaponArray); //この値をfor_jquery.jsファイルに返します
306
+
307
+ exit; //処理の終了
126
308
 
127
309
 
128
310
 
@@ -132,134 +314,132 @@
132
314
 
133
315
 
134
316
 
135
- こちらのjsもjQueryなどの接続を確かめるものです　
317
+ 計算コード(real.js)
136
318
 
137
319
  ```javascript
138
320
 
139
- const atkId = '1';
140
-
141
- const element = document.getElementById('txt_field');
142
-
143
-
144
-
145
- $.ajax({
146
-
147
- type:'post',
148
-
149
- url:'http://localhost:8888/function.php',//mampで実行してるのでlocalが88888です
150
-
151
- data:{'func':'get_txt_content','argument':atkId},
152
-
153
- dataType:'json',
154
-
155
- })
156
-
157
- .done(function(response) {
158
-
159
- element.innerHTML = "<p>"+response+"</p>";//接続成功した時に、returnで返却された変数をhtmlに入力するという打算です
160
-
161
- //下のメモに詳しく書いてます
162
-
163
-
164
-
165
- })
166
-
167
- .fail(function(xhr) {
168
-
169
- alert("失敗！");
170
-
171
- })
172
-
173
- .always(function(xhr, msg) {
174
-
175
- });
176
-
177
-
321
+
322
+
323
+ function getValue(atkAH,atkAA,atkAM,atkAD,atkAS,atkBH,atkBA,atkBM,atkBD,atkBS,atkSkill,atkName,atkVisu,weapona_name,weaponm_name,spe_type,spe_damage,spe_num,spe_name,difAH,difAA,difAM,difAD,difAS,difBH,difBA,difBM,difBD,difBS,difSkill,difVisu,difName,weapona_dam,weapona_num,weapona_dam,weaponm_dam,weaponm_attribute,weaponm_heal)
324
+
325
+ {//引数はそのまま使ってます
326
+
327
+ let atkId = new Option(document.getElementById("atkName").value);
328
+
329
+ let atkType = new Option(document.getElementById("atkType").value);
330
+
331
+ let atkArm = new Option(document.getElementById("atkArm").value);
332
+
333
+ let atkLevel = new Option(document.getElementById("atkLevel").value);
334
+
335
+ //少し省略
336
+
337
+ var realAtkStatusH = atkAH + 0.010204 * (atkLevel-1) * (atkHpchange + atkBH - atkAH);
338
+
339
+
340
+
341
+ //めちゃ省略してます
342
+
343
+ else
344
+
345
+ {//火力がインフレしてる時
346
+
347
+ howmanyTokill = Math.floor(howmanyTokill/100);
348
+
349
+ innerHTMLtxt.innerHTML ="期待値は"+resultNum+"なので、"+atkName+"の"+spe_name+"Gで"+difName+"が"+howmanyTokill+"体吹き飛びます! 命中率は"+(500-missingCount)/(500*spe_num)*100+"です！";
350
+
351
+ }
352
+
353
+ }
178
354
 
179
355
  ```
180
356
 
181
- <メモ>
357
+
182
-
358
+
359
+
360
+
183
- しかし、開発画面の方では
361
+ htmlコード(index.php)
184
-
185
- > Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')
186
-
187
-
188
-
189
- と表示されちゃいました...responseがダメみたいです　phpファイルにデータを送れたのはいいものの、responseがないからこうなってるのではと考察してます
190
-
191
-
192
-
193
- 下のhtmlも試験的なものに更新しました。jQueryは古いバージョンのものをネットから読み込む形にしたら上手く接続できました
194
-
195
-
196
362
 
197
363
  ```html
198
364
 
365
+ <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
366
+
199
- <!DOCTYPE html>
367
+ <html>
200
-
201
- <html lang="jp">
202
368
 
203
369
  <head>
204
370
 
371
+ <link rel="shortcut icon" href="icon.ico">
372
+
373
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
374
+
375
+ <meta http-equiv="Content-Style-Type" content="text/css">
376
+
377
+ <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,user-scalable=no">
378
+
379
+ <link rel="stylesheet" href="stylesheet.css">
380
+
381
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
382
+
383
+ <script type="text/javascript" src="real.js"></script><!--上に、先にjQuery読み込んでます！-->
384
+
385
+ <script type="text/javascript" src="for_jquery.js"></script>
386
+
205
- <title>サンプルページ</title>
387
+ <title>妖怪ウォッチ2ダメージ計算</title>
206
-
207
-
208
-
209
- <meta charset="utf-8">
210
-
211
- <meta name="description" content="">
212
-
213
- <meta name="author" content="">
214
-
215
- <meta name="keywords" content="">
216
-
217
- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
218
-
219
-
220
388
 
221
389
  </head>
222
390
 
391
+
392
+
223
393
  <body>
224
394
 
225
- <!-- ここからHTMLでマークアップする -->
226
-
227
-
228
-
229
- <!-- JQeryを読み込む -->
395
+ <!--しばらく省略-->
230
-
396
+
231
- <!--<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>-->
397
+ <label for ="attackerSelect">妖怪の名前:</label>
232
-
398
+
233
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
399
+ <select id="atkName" name="attackerSelect">
400
+
234
-
401
+ <option value="1">妖怪の種類を選択</option>
402
+
235
-
403
+ <option value="1">ぶようじん坊</option>
404
+
236
-
405
+ <option value="2">がらあきん坊</option>
406
+
407
+ <option value="3">さきがけの助</option>
408
+
409
+ <option value="4">ダラケ刀</option>
410
+
411
+ <option value="5">ザンバラ刀</option>
412
+
413
+ </select><!--ここのデータを、for_jquery.jsファイルが拾ってます！difNameも同様です-->
414
+
237
- <!-- 自分で作成したJavaScriptを読み込む -->
415
+ <!--しばらく省略-->
416
+
417
+
418
+
238
-
419
+ <div class="main-downdown">
420
+
239
- <script src="challenge.js"></script>
421
+ <label for="label1">計算する</label>
240
-
241
-
242
-
422
+
243
- <div id="txt_field"></div>//ここを更新する策略です
423
+ <input type="button" id="label1" onclick="changeframe_blue();" ><!--ここのボタンでfor_jqueryファイルを起動させます！-->
244
-
424
+
245
- </body>
425
+ </div>
246
-
426
+
247
- </html>
427
+ <div class="resultA" id="innerHTMLtxt"></div><!--ここに、getValueでの計算結果が映し出されます-->
428
+
429
+
248
430
 
249
431
  ```
250
432
 
251
433
 
252
434
 
435
+
436
+
253
- ### 画像
437
+ ### エラーとその画像
438
+
439
+
440
+
254
-
441
+ どうやら、ajaxの一部のコード(fail文当たり)とjQueryにエラーが発生してるようです　ボタンを押しても何も発生してません。
255
-
256
-
442
+
257
- index.php(htmlファイル)を実行したときの様子
443
+ このコードを更新し終わって、mtsさんの教えていただいたことを理解した後にコードを細分化して再度検証してきます。
258
-
444
+
259
- ![イメージ説明](2eed5b154bce8ee1ac3b83ca9b9d898b.png)
445
+ ![スクリーンショット](41ea56a84079c72fcb819bfbb228db6f.png)
260
-
261
-
262
-
263
- function.phpが使えない様子
264
-
265
- ![イメージ説明](1b022955abdef58a71029ca0adcd76a7.png)

5

コードや問題点の更新

2021/11/13 23:36

投稿

TrueRyoB
TrueRyoB

スコア79

test CHANGED
File without changes
test CHANGED
@@ -4,10 +4,12 @@
4
4
 
5
5
  jQueryを介して画面ロードなしでbottun -> js -> phpでdbからデータ回収 -> jsで計算　を実行しようとしてます。
6
6
 
7
- 現在jQueryの実装段階で詰まっています
7
+ 現在phpファイルが動かないところで詰まっています
8
8
 
9
9
  詳しくは下のエラーを見ていただければと思います
10
10
 
11
+ 実行環境はMAMPです
12
+
11
13
 
12
14
 
13
15
  ### コード
@@ -18,26 +20,22 @@
18
20
 
19
21
 
20
22
 
21
- DB接続用コード
23
+ DB接続用コード(試験的)
22
24
 
23
25
  ```php
24
26
 
25
27
  <?php
26
28
 
27
-
28
-
29
- function connect_with_data($atkId, $difId)　
30
-
31
- {//jsの命令で発動させる関数です　引数はjsから持ってきてます
29
+ //ファイル名はfunction.phpです
30
+
31
+ function get_txt_content($atk_name){//DB接続用関数です
32
+
33
+
32
34
 
33
35
  try {
34
36
 
35
37
 
36
38
 
37
- /* リクエストから得たスーパーグローバル変数をチェックするなどの処理 */
38
-
39
-
40
-
41
39
  // データベースに接続
42
40
 
43
41
  $pdo = new PDO(
@@ -58,13 +56,11 @@
58
56
 
59
57
  );
60
58
 
61
-
62
-
63
-
59
+
64
60
 
65
61
  $stmt =$pdo->prepare('SELECT * FROM yokai_data WHERE id = :id');
66
62
 
67
- $stmt->bindValue(':id', $atkId);
63
+ $stmt->bindValue(':id', $atk_name);
68
64
 
69
65
  $stmt->execute();
70
66
 
@@ -72,173 +68,61 @@
72
68
 
73
69
  {
74
70
 
75
- $atkStatus_a_h = (int)$row['status_a_h'];//dif
76
-
77
- $atkStatus_a_a = (int)$row['status_a_a'];
78
-
79
- $atkStatus_a_m = (int)$row['Status_a_m'];
80
-
81
- $atkStatus_a_d = (int)$row['status_a_d'];
82
-
83
- $atkStatus_a_s = (int)$row['status_a_s'];
84
-
85
- $atkStatus_b_h = (int)$row['status_d_h'];
86
-
87
- $atkStatus_b_a = (int)$row['status_b_a'];
88
-
89
- $atkStatus_b_m = (int)$row['status_b_m'];
90
-
91
- $atkStatus_b_d = (int)$row['status_b_d'];
92
-
93
- $atkStatus_b_s = (int)$row['status_b_s'];
94
-
95
- $atkSkill = $row['skill_name'];//dif
96
-
97
- $weapon_a = $row['weapon_a'];//none
98
-
99
- $weapon_m = $row['weapon_m'];//none
100
-
101
- $atkName = $row['yokai_name'];//dif
102
-
103
- $atkVisu = $row['visu'];//dif
104
-
105
- $spe_type = $row['spe_type'];//none
106
-
107
- $spe_damage = $row['spe_damage'];
108
-
109
- $spe_num = $row['spe_num'];
110
-
111
- $spe_name = $row['spe_name'];
71
+ $atkSkill = $row['skill_name'];
112
72
 
113
73
  }
114
74
 
115
-
116
-
117
- $stmt =$pdo->prepare('SELECT * FROM weapon WHERE weapon_name = :wea');//ここは、weaponaゾーン difは必要ないのだ
75
+
118
-
119
- $stmt->bindValue(':wea', $weapon_a);
76
+
120
-
121
- $stmt->execute();
122
-
123
- foreach($stmt as $row)
124
-
125
- {
126
-
127
- $weapon_a_dam = (int)$row['damage'];
128
-
129
- $weapon_a_num = (int)$row['num'];
130
-
131
- }
132
-
133
- $stmt =$pdo->prepare('SELECT * FROM weapon WHERE weapon_name = :wea');
134
-
135
- $stmt->bindValue(':wea', $weapon_m);
136
-
137
- $stmt->execute();
138
-
139
- foreach($stmt as $row)
140
-
141
- {
142
-
143
- $weapon_m_dam = (int)$row['damage'];
144
-
145
- $weapon_m_attribute = (int)$row['weapon'];
146
-
147
- $weapon_m_heal = (int)$row['heal'];
148
-
149
- }
150
-
151
-
152
-
153
- //今からひたすらにjsonに書き換える
154
-
155
- $spe_type_json = json_encode( $spe_type );
156
-
157
- $spe_damage_json = json_encode( $spe_damage );
158
-
159
- $spe_num_json = json_encode( $spe_num );
160
-
161
- $atkAH_json = json_encode( $atkStatus_a_h );
162
-
163
- $atkAA_json = json_encode( $atkStatus_a_a );
164
-
165
- $atkAM_json = json_encode( $atkStatus_a_m );
166
-
167
- $atkAD_json = json_encode( $atkStatus_a_d );
168
-
169
- $atkAS_json = json_encode( $atkStatus_a_s );
170
-
171
- $atkBH_json = json_encode( $atkStatus_b_h );
172
-
173
- $atkBA_json = json_encode( $atkStatus_b_a );
174
-
175
- $atkBM_json = json_encode( $atkStatus_b_m );
176
-
177
- $atkBD_json = json_encode( $atkStatus_b_d );
178
-
179
- $atkBS_json = json_encode( $atkStatus_b_s );
180
-
181
- $difAH_json = json_encode( $difStatus_a_h );
182
-
183
- $difAA_json = json_encode( $difStatus_a_a );
184
-
185
- $difAM_json = json_encode( $difStatus_a_m );
186
-
187
- $difAD_json = json_encode( $difStatus_a_d );
188
-
189
- $difAS_json = json_encode( $difStatus_a_s );
190
-
191
- $difBH_json = json_encode( $difStatus_b_h );
192
-
193
- $difBA_json = json_encode( $difStatus_b_a );
194
-
195
- $difBM_json = json_encode( $difStatus_b_m );
196
-
197
- $difBD_json = json_encode( $difStatus_b_d );
198
-
199
- $difBS_json = json_encode( $difStatus_b_s );
200
-
201
- $weapon_a_dam_json = json_encode( $weapon_a_dam);
202
-
203
- $weapon_a_num_json = json_encode( $weapon_a_num);
204
-
205
- $weapon_m_dam_json = json_encode( $weapon_m_dam);
206
-
207
- $weapon_m_attribute_json = json_encode( $weapon_m_attribute);
208
-
209
- $weapon_m_heal_json = json_encode( $weapon_m_heal);
210
-
211
- $atkSkill_json = json_encode( $atkSkill );
77
+ $atkSkill_json = json_encode( $atkSkill );
212
-
78
+
79
+
80
+
213
- $difSkill_json = json_encode( $difSkill );
81
+ return $atkSkill_json;//これでjsにデータ返却を試みます
214
-
215
- $weaponaName_json = json_encode( $weapon_a );
216
-
217
- $weaponmName_json = json_encode( $weapon_m );
218
82
 
219
83
 
220
84
 
221
- $pdo =null;
85
+ $pdo =null;
222
86
 
223
87
 
224
88
 
225
89
  } catch (PDOException $e) {
226
90
 
227
-
228
-
229
91
  header('Content-Type: text/plain; charset=UTF-8', true, 500);
230
92
 
231
93
  exit($e->getMessage());
232
94
 
233
95
 
234
96
 
97
+ } catch (PDOException $e) {
98
+
99
+
100
+
101
+ // エラーが発生した場合は「500 Internal Server Error」でテキストとして表示して終了する
102
+
103
+ // - もし手抜きしたくない場合は普通にHTMLの表示を継続する
104
+
105
+ // - ここではエラー内容を表示しているが， 実際の商用環境ではログファイルに記録して， Webブラウザには出さないほうが望ましい
106
+
107
+ header('Content-Type: text/plain; charset=UTF-8', true, 500);
108
+
109
+ exit($e->getMessage());
110
+
111
+
112
+
235
113
  }
236
114
 
237
- header('Content-Type: text/html; charset=utf-8');
115
+
238
116
 
239
117
  }
240
118
 
119
+
120
+
121
+ $func = $_POST['func'];//jsから送られたデータで関数を実行させようとしてるところです
122
+
123
+ $atkId = $_POST['argument'];
124
+
241
- //ここなんですがまだ把握し切ってなかったので変更してないです　取り敢えずjsの処理が済んだらこっちに手つけます
125
+ echo $func($atkId);//前回echoコマンドの表記を忘れていたので変な感じになりましたが、送られたデータで関数実行というのは恐らくこのことだと思います
242
126
 
243
127
 
244
128
 
@@ -248,223 +132,119 @@
248
132
 
249
133
 
250
134
 
135
+ こちらのjsもjQueryなどの接続を確かめるものです　
136
+
251
137
  ```javascript
252
138
 
253
-
139
+ const atkId = '1';
140
+
254
-
141
+ const element = document.getElementById('txt_field');
142
+
143
+
144
+
145
+ $.ajax({
146
+
147
+ type:'post',
148
+
149
+ url:'http://localhost:8888/function.php',//mampで実行してるのでlocalが88888です
150
+
151
+ data:{'func':'get_txt_content','argument':atkId},
152
+
153
+ dataType:'json',
154
+
155
+ })
156
+
255
- function changeframe_blue() {
157
+ .done(function(response) {
256
-
158
+
257
- document.getElementById('innerHTMLtxt').style.borderColor = '#01eeff';
159
+ element.innerHTML = "<p>"+response+"</p>";//接続成功した時に、returnで返却された変数をhtmlに入力するという打算です
160
+
161
+ //下のメモに詳しく書いてます
162
+
163
+
164
+
165
+ })
166
+
167
+ .fail(function(xhr) {
168
+
169
+ alert("失敗！");
170
+
171
+ })
172
+
173
+ .always(function(xhr, msg) {
174
+
175
+ });
258
176
 
259
177
 
260
178
 
261
- }
262
-
263
-
264
-
265
- //新しく関数connect_dataを作りました jQueryを呼びます
266
-
267
- function connect_data(){
268
-
269
-
270
-
271
- let atkId = new Option(document.getElementById("atkName").value);
272
-
273
- let difId = new Option(document.getElementById("difName").value);
274
-
275
-
276
-
277
- $.ajax({
278
-
279
- url: 'find_value.php', //アクセスするURL
280
-
281
- type: 'post',//全角消しました！
282
-
283
- cache: false, //cacheを使うか使わないかを設定
284
-
285
- dataType:'json', //data type script・xmlDocument・jsonなど
286
-
287
- data:{'func' : 'connect_with_data', 'atkId': atkId, 'difId': difId }, //アクセスするときに必要なデータを記載
288
-
289
- })
290
-
291
- .done(function(response) { //正常に処理が完了した時
292
-
293
- getValue();//成功した時に、計算用関数（下にあるやつ）を実行するようにします！
294
-
295
-
296
-
297
- })
298
-
299
- .fail(function(xhr) {
300
-
301
- //ここは多分書いた方がいいけどまだ手をつけてません...次回見直すときここも修正します
302
-
303
- })
304
-
305
- .always(function(xhr, msg) {
306
-
307
-
308
-
309
- });
310
-
311
-
312
-
313
- }
314
-
315
-
316
-
317
-
318
-
319
- function getValue() {
320
-
321
- let atkId = new Option(document.getElementById("atkName").value);//フォームから値を読み込んでます
322
-
323
- let atkType = new Option(document.getElementById("atkType").value);
324
-
325
- let atkArm = new Option(document.getElementById("atkArm").value);
326
-
327
- //省略
328
-
329
- var atkName = JSON.parse('<?php echo $atkName_json; ?>');//phpで入手したデータを取り込んでます
330
-
331
- var difName = JSON.parse('<?php echo $difName_json; ?>');
332
-
333
- var spe_name = JSON.parse('<?php echo $spe_name_json; ?>');
334
-
335
-
336
-
337
-
338
-
339
- //省略
340
-
341
- if(1==1)//この式も省略してます
342
-
343
- {
344
-
345
-
346
-
347
- }else//計算してます
348
-
349
- {
350
-
351
- innerHTMLtxt.innerHTML ="期待値は"+resultNum+"！";//htmlの結果表示欄はデフォルトでは空白にしてあります。ここを埋めることで更新しようと考えてます！
352
-
353
- }
354
-
355
- }
356
-
357
-
358
-
359
-
360
-
361
179
  ```
362
180
 
181
+ <メモ>
182
+
183
+ しかし、開発画面の方では
184
+
185
+ > Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')
186
+
187
+
188
+
189
+ と表示されちゃいました...responseがダメみたいです　phpファイルにデータを送れたのはいいものの、responseがないからこうなってるのではと考察してます
190
+
191
+
192
+
193
+ 下のhtmlも試験的なものに更新しました。jQueryは古いバージョンのものをネットから読み込む形にしたら上手く接続できました
194
+
363
195
 
364
196
 
365
197
  ```html
366
198
 
367
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
368
-
369
- <html>
199
+ <!DOCTYPE html>
200
+
201
+ <html lang="jp">
370
202
 
371
203
  <head>
372
204
 
205
+ <title>サンプルページ</title>
206
+
207
+
208
+
209
+ <meta charset="utf-8">
210
+
373
- <script src="jQuery-3.6.0.min.js"></script>
211
+ <meta name="description" content="">
212
+
374
-
213
+ <meta name="author" content="">
214
+
215
+ <meta name="keywords" content="">
216
+
375
- <script type="text/javascript" src="real.js"></script>//順列を変更いたしました！
217
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
218
+
219
+
376
220
 
377
221
  </head>
378
222
 
379
-
380
-
381
223
  <body>
382
224
 
383
- <div class="top">
225
+ <!-- ここからHTMLでマークアップする -->
384
-
385
- <h2 class="icon-sentence">妖怪ウォッチ２ダメージ計算</h2>
226
+
386
-
387
- <img class="topicon" src="iconimg.jpeg" width="150px";>
227
+
388
-
228
+
389
- </div>
229
+ <!-- JQeryを読み込む -->
390
-
391
-
392
-
230
+
393
- <div class= "main">
231
+ <!--<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>-->
232
+
394
-
233
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
234
+
235
+
236
+
395
- <div class= "main-upper">
237
+ <!-- 自分で作成したJavaScriptを読み込む -->
396
-
397
- <div class= "attack-input">
238
+
398
-
399
- <p class=ababab>アタッカーの設定</p>
400
-
401
- <p>
402
-
403
- <form action="index.php" method="post">
404
-
405
- <label for ="attackerSelect">妖怪の名前:</label>
239
+ <script src="challenge.js"></script>
406
-
407
- <select id="atkName" name="attackerSelect">
240
+
408
-
241
+
242
+
409
- <option value="1">妖怪の種類を選択</option>
243
+ <div id="txt_field"></div>//ここを更新する策略です
410
-
411
- <option value="1">ぶようじん坊</option>
244
+
412
-
413
- <option value="2">がらあきん坊</option>
414
-
415
- <option value="3">さきがけの助</option>
416
-
417
- <option value="4">ダラケ刀</option>
418
-
419
- <option value="5">ザンバラ刀</option>
420
-
421
- </select>
422
-
423
- </form>
245
+ </body>
424
-
425
- </p>
246
+
426
-
427
- <p>
428
-
429
- <label for ="feelSelect">検証する技:</label>
430
-
431
- <select id="atkType" name="feelSelect">
432
-
433
- <option value="1">物理技の火力</option>
434
-
435
- <option value="2">妖術技の火力</option>
436
-
437
- </select>
438
-
439
- </p>
440
-
441
- <p>
442
-
443
- <label for ="armSelect">装備:</label>
444
-
445
- <select id="atkArm" name="armSelect">
446
-
447
- <option value="a_densetsu">伝説の腕輪</option>
448
-
449
- <option value="">その他</option>
450
-
451
- </select>
452
-
453
- </p>
454
-
455
- </div>
247
+ </html>
456
-
457
- <div class="main-downdown">
458
-
459
- <label for="label1">計算する</label><!--ここがボタンです！jsファイルに繋がってます！-->
460
-
461
- <input type="button" id="label1" onclick="changeframe_blue(); connect_data();" >
462
-
463
- </div>
464
-
465
- </div>
466
-
467
- <div class="resultA" id="innerHTMLtxt"></div>
468
248
 
469
249
  ```
470
250
 
@@ -474,38 +254,12 @@
474
254
 
475
255
 
476
256
 
477
- なぜか画像貼れないです...
478
-
479
- なのでエラ〜メッセージをコピペしました
480
-
481
-
482
-
483
- > Uncaught TypeError: Illegal invocation
484
-
485
- at i (jQuery-3.6.0.min.js:2)
486
-
487
- at At (jQuery-3.6.0.min.js:2)
488
-
489
- at At (jQuery-3.6.0.min.js:2)
490
-
491
- at At (jQuery-3.6.0.min.js:2)
492
-
493
- at Function.S.param (jQuery-3.6.0.min.js:2)
494
-
495
- at Function.ajax (jQuery-3.6.0.min.js:2)
496
-
497
- at connect_data (real.js:14)
498
-
499
- at HTMLInputElement.onclick (（インデックス）:561)
500
-
501
-
502
-
503
- connect_dataは$.ajaxの行を指してます
257
+ index.php(htmlファイル)を実行したときの様子
504
-
258
+
505
- HTMLはボタンの行です
259
+ ![イメージ説明](2eed5b154bce8ee1ac3b83ca9b9d898b.png)
506
-
260
+
261
+
262
+
507
- jQueryはほとんどが2行目にあるので特定不可です...
263
+ function.phpが使えない様子
508
-
509
-
510
-
264
+
511
- よろしくお願いします
265
+ ![イメージ説明](1b022955abdef58a71029ca0adcd76a7.png)

4

コードの更新

2021/11/13 11:51

投稿

TrueRyoB
TrueRyoB

スコア79

test CHANGED
File without changes
test CHANGED
@@ -278,7 +278,7 @@
278
278
 
279
279
  url: 'find_value.php', //アクセスするURL
280
280
 
281
- type: 'post',　　 //post or get
281
+ type: 'post',//全角消しました！
282
282
 
283
283
  cache: false, //cacheを使うか使わないかを設定
284
284
 
@@ -370,9 +370,9 @@
370
370
 
371
371
  <head>
372
372
 
373
+ <script src="jQuery-3.6.0.min.js"></script>
374
+
373
- <script type="text/javascript" src="real.js"></script>
375
+ <script type="text/javascript" src="real.js"></script>//順列を変更いたしました！
374
-
375
- <script src="jQuery-3.6.0.min.js"></script><!--ここでjQueryを読み込んでますが、エラーが起きてしまってます(´･_･`)　バージョンはあってますよ！-->
376
376
 
377
377
  </head>
378
378
 

3

コードの更新

2021/11/12 21:31

投稿

TrueRyoB
TrueRyoB

スコア79

test CHANGED
File without changes
test CHANGED
@@ -2,152 +2,510 @@
2
2
 
3
3
 
4
4
 
5
- 私が今作っているのは、「埋められたフォーム」(html)に応じて「DBから持ってきたデータ」(php)を「javascriptに渡して計算させる」(javascript)プログラムです。
6
-
7
- ボタンを押すのをトリガーにしたくて、以下のコードを作ったのですが、上手く行きません。何がいけないのでしょうか？ご教授お願い致しますm(_ _)m
8
-
9
- **buttonクリック->php起動->データ入手->javascript起動**の流れを作るつもりでいます。
10
-
11
-
12
-
13
- **ボタンを押してもphpに指示が向かってない**ようです。
14
-
15
- htmlファイルもphpにしたため、今はひとつのファイルの中に2つの言語が入ってる状態になってます
16
-
17
- javascriptはonclick属性で起動させるのが一番なのですが、**phpで入手したデータを使わないといけない**のでphpの最後の方で起動させてます。
5
+ jQueryを介して画面ロードなしでbottun -> js -> phpでdbからデータ回収 -> jsで計算　を実行しようとしてます。
6
+
18
-
7
+ 現在jQueryの実装段階で詰まっています
8
+
19
- ちなみに、changeframe_blue関数はちゃんと起動します
9
+ 詳しくは下のエラーを見ていただければと思います
20
10
 
21
11
 
22
12
 
23
13
  ### コード
24
14
 
15
+
16
+
17
+
18
+
19
+
20
+
21
+ DB接続用コード
22
+
25
23
  ```php
26
24
 
27
25
  <?php
28
26
 
29
27
 
30
28
 
31
- if(isset($_POST["s"]))//おそらくここが間違っているのだと思われます
29
+ function connect_with_data($atkId, $difId)　
32
-
33
- {
30
+
34
-
35
- echo '<script language=javascript>alert("ダイアログ表示")</script>';
36
-
37
- //上はちゃんと接続できるか試してるものです　反応しませんでしたが...
31
+ {//jsの命令で発動させる関数です　引数はjsから持ってきてます
38
-
39
- echo '<script>getValue();</script>';
40
-
41
- //上のこれが本命です
42
-
43
-
44
32
 
45
33
  try {
46
34
 
47
35
 
48
36
 
37
+ /* リクエストから得たスーパーグローバル変数をチェックするなどの処理 */
38
+
39
+
40
+
49
- //省略
41
+ // データベースに接続
42
+
50
-
43
+ $pdo = new PDO(
44
+
51
-
45
+ 'mysql:dbname=ryorar;host=127.0.0.1;charset=utf8mb4',
46
+
52
-
47
+ 'viewers',
48
+
49
+ 'Mypass1!',
50
+
51
+ [
52
+
53
+ PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
54
+
55
+ PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
56
+
57
+ ]
58
+
59
+ );
60
+
61
+
62
+
63
+
64
+
65
+ $stmt =$pdo->prepare('SELECT * FROM yokai_data WHERE id = :id');
66
+
67
+ $stmt->bindValue(':id', $atkId);
68
+
69
+ $stmt->execute();
70
+
71
+ foreach($stmt as $row)
72
+
73
+ {
74
+
75
+ $atkStatus_a_h = (int)$row['status_a_h'];//dif
76
+
77
+ $atkStatus_a_a = (int)$row['status_a_a'];
78
+
79
+ $atkStatus_a_m = (int)$row['Status_a_m'];
80
+
81
+ $atkStatus_a_d = (int)$row['status_a_d'];
82
+
83
+ $atkStatus_a_s = (int)$row['status_a_s'];
84
+
85
+ $atkStatus_b_h = (int)$row['status_d_h'];
86
+
87
+ $atkStatus_b_a = (int)$row['status_b_a'];
88
+
89
+ $atkStatus_b_m = (int)$row['status_b_m'];
90
+
91
+ $atkStatus_b_d = (int)$row['status_b_d'];
92
+
93
+ $atkStatus_b_s = (int)$row['status_b_s'];
94
+
95
+ $atkSkill = $row['skill_name'];//dif
96
+
97
+ $weapon_a = $row['weapon_a'];//none
98
+
99
+ $weapon_m = $row['weapon_m'];//none
100
+
101
+ $atkName = $row['yokai_name'];//dif
102
+
103
+ $atkVisu = $row['visu'];//dif
104
+
105
+ $spe_type = $row['spe_type'];//none
106
+
107
+ $spe_damage = $row['spe_damage'];
108
+
109
+ $spe_num = $row['spe_num'];
110
+
111
+ $spe_name = $row['spe_name'];
112
+
113
+ }
114
+
115
+
116
+
117
+ $stmt =$pdo->prepare('SELECT * FROM weapon WHERE weapon_name = :wea');//ここは、weaponaゾーン difは必要ないのだ
118
+
119
+ $stmt->bindValue(':wea', $weapon_a);
120
+
121
+ $stmt->execute();
122
+
123
+ foreach($stmt as $row)
124
+
125
+ {
126
+
127
+ $weapon_a_dam = (int)$row['damage'];
128
+
129
+ $weapon_a_num = (int)$row['num'];
130
+
131
+ }
132
+
133
+ $stmt =$pdo->prepare('SELECT * FROM weapon WHERE weapon_name = :wea');
134
+
135
+ $stmt->bindValue(':wea', $weapon_m);
136
+
137
+ $stmt->execute();
138
+
139
+ foreach($stmt as $row)
140
+
141
+ {
142
+
143
+ $weapon_m_dam = (int)$row['damage'];
144
+
145
+ $weapon_m_attribute = (int)$row['weapon'];
146
+
147
+ $weapon_m_heal = (int)$row['heal'];
148
+
149
+ }
150
+
151
+
152
+
153
+ //今からひたすらにjsonに書き換える
154
+
155
+ $spe_type_json = json_encode( $spe_type );
156
+
157
+ $spe_damage_json = json_encode( $spe_damage );
158
+
159
+ $spe_num_json = json_encode( $spe_num );
160
+
161
+ $atkAH_json = json_encode( $atkStatus_a_h );
162
+
163
+ $atkAA_json = json_encode( $atkStatus_a_a );
164
+
165
+ $atkAM_json = json_encode( $atkStatus_a_m );
166
+
167
+ $atkAD_json = json_encode( $atkStatus_a_d );
168
+
169
+ $atkAS_json = json_encode( $atkStatus_a_s );
170
+
171
+ $atkBH_json = json_encode( $atkStatus_b_h );
172
+
173
+ $atkBA_json = json_encode( $atkStatus_b_a );
174
+
175
+ $atkBM_json = json_encode( $atkStatus_b_m );
176
+
177
+ $atkBD_json = json_encode( $atkStatus_b_d );
178
+
179
+ $atkBS_json = json_encode( $atkStatus_b_s );
180
+
181
+ $difAH_json = json_encode( $difStatus_a_h );
182
+
183
+ $difAA_json = json_encode( $difStatus_a_a );
184
+
185
+ $difAM_json = json_encode( $difStatus_a_m );
186
+
187
+ $difAD_json = json_encode( $difStatus_a_d );
188
+
189
+ $difAS_json = json_encode( $difStatus_a_s );
190
+
191
+ $difBH_json = json_encode( $difStatus_b_h );
192
+
193
+ $difBA_json = json_encode( $difStatus_b_a );
194
+
195
+ $difBM_json = json_encode( $difStatus_b_m );
196
+
197
+ $difBD_json = json_encode( $difStatus_b_d );
198
+
199
+ $difBS_json = json_encode( $difStatus_b_s );
200
+
201
+ $weapon_a_dam_json = json_encode( $weapon_a_dam);
202
+
203
+ $weapon_a_num_json = json_encode( $weapon_a_num);
204
+
205
+ $weapon_m_dam_json = json_encode( $weapon_m_dam);
206
+
207
+ $weapon_m_attribute_json = json_encode( $weapon_m_attribute);
208
+
209
+ $weapon_m_heal_json = json_encode( $weapon_m_heal);
210
+
211
+ $atkSkill_json = json_encode( $atkSkill );
212
+
213
+ $difSkill_json = json_encode( $difSkill );
214
+
215
+ $weaponaName_json = json_encode( $weapon_a );
216
+
217
+ $weaponmName_json = json_encode( $weapon_m );
218
+
219
+
220
+
221
+ $pdo =null;
222
+
223
+
224
+
53
- } catch (PDOException $e) {
225
+ } catch (PDOException $e) {
226
+
227
+
228
+
54
-
229
+ header('Content-Type: text/plain; charset=UTF-8', true, 500);
230
+
55
-
231
+ exit($e->getMessage());
232
+
233
+
234
+
235
+ }
236
+
237
+ header('Content-Type: text/html; charset=utf-8');
238
+
239
+ }
240
+
241
+ //ここなんですがまだ把握し切ってなかったので変更してないです　取り敢えずjsの処理が済んだらこっちに手つけます
242
+
243
+
244
+
245
+ ?>
246
+
247
+ ```
248
+
249
+
250
+
251
+ ```javascript
252
+
253
+
254
+
255
+ function changeframe_blue() {
256
+
257
+ document.getElementById('innerHTMLtxt').style.borderColor = '#01eeff';
258
+
259
+
260
+
261
+ }
262
+
263
+
264
+
265
+ //新しく関数connect_dataを作りました jQueryを呼びます
266
+
267
+ function connect_data(){
268
+
269
+
270
+
271
+ let atkId = new Option(document.getElementById("atkName").value);
272
+
273
+ let difId = new Option(document.getElementById("difName").value);
274
+
275
+
276
+
277
+ $.ajax({
278
+
279
+ url: 'find_value.php', //アクセスするURL
280
+
281
+ type: 'post',　　 //post or get
282
+
283
+ cache: false, //cacheを使うか使わないかを設定
284
+
285
+ dataType:'json', //data type script・xmlDocument・jsonなど
286
+
287
+ data:{'func' : 'connect_with_data', 'atkId': atkId, 'difId': difId }, //アクセスするときに必要なデータを記載
288
+
289
+ })
290
+
291
+ .done(function(response) { //正常に処理が完了した時
292
+
293
+ getValue();//成功した時に、計算用関数（下にあるやつ）を実行するようにします！
294
+
295
+
296
+
297
+ })
298
+
299
+ .fail(function(xhr) {
300
+
301
+ //ここは多分書いた方がいいけどまだ手をつけてません...次回見直すときここも修正します
302
+
303
+ })
304
+
305
+ .always(function(xhr, msg) {
306
+
307
+
308
+
309
+ });
310
+
311
+
312
+
313
+ }
314
+
315
+
316
+
317
+
318
+
319
+ function getValue() {
320
+
321
+ let atkId = new Option(document.getElementById("atkName").value);//フォームから値を読み込んでます
322
+
323
+ let atkType = new Option(document.getElementById("atkType").value);
324
+
325
+ let atkArm = new Option(document.getElementById("atkArm").value);
56
326
 
57
327
  //省略
58
328
 
59
-
329
+ var atkName = JSON.parse('<?php echo $atkName_json; ?>');//phpで入手したデータを取り込んでます
330
+
331
+ var difName = JSON.parse('<?php echo $difName_json; ?>');
332
+
333
+ var spe_name = JSON.parse('<?php echo $spe_name_json; ?>');
334
+
335
+
336
+
337
+
338
+
339
+ //省略
340
+
341
+ if(1==1)//この式も省略してます
342
+
343
+ {
344
+
345
+
346
+
347
+ }else//計算してます
348
+
349
+ {
350
+
351
+ innerHTMLtxt.innerHTML ="期待値は"+resultNum+"！";//htmlの結果表示欄はデフォルトでは空白にしてあります。ここを埋めることで更新しようと考えてます！
60
352
 
61
353
  }
62
354
 
63
355
  }
64
356
 
357
+
358
+
359
+
360
+
65
- header('Content-Type: text/html; charset=utf-8');
361
+ ```
66
-
362
+
363
+
364
+
67
- ?>
365
+ ```html
68
-
69
-
70
366
 
71
367
  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
72
368
 
73
369
  <html>
74
370
 
75
-
76
-
77
- <!--省略-->
371
+ <head>
78
-
79
- <div class="main-downdown">
372
+
80
-
81
- <label for="label1">計算する</label>
82
-
83
- <form method="post" action="index.php">
373
+ <script type="text/javascript" src="real.js"></script>
84
-
374
+
85
- <input type="button" value="実行" name="s" id="label1" onclick="changeframe_blue();" > <!--ここでボタンを押します-->
375
+ <script src="jQuery-3.6.0.min.js"></script><!--ここでjQueryを読み込んでますが、エラーが起きてしまってます(´･_･`)　バージョンはあってますよ！-->
86
-
376
+
87
- </form>
377
+ </head>
378
+
379
+
380
+
381
+ <body>
382
+
383
+ <div class="top">
384
+
385
+ <h2 class="icon-sentence">妖怪ウォッチ２ダメージ計算</h2>
386
+
387
+ <img class="topicon" src="iconimg.jpeg" width="150px";>
88
388
 
89
389
  </div>
90
390
 
391
+
392
+
393
+ <div class= "main">
394
+
395
+ <div class= "main-upper">
396
+
397
+ <div class= "attack-input">
398
+
399
+ <p class=ababab>アタッカーの設定</p>
400
+
401
+ <p>
402
+
403
+ <form action="index.php" method="post">
404
+
405
+ <label for ="attackerSelect">妖怪の名前:</label>
406
+
407
+ <select id="atkName" name="attackerSelect">
408
+
409
+ <option value="1">妖怪の種類を選択</option>
410
+
411
+ <option value="1">ぶようじん坊</option>
412
+
413
+ <option value="2">がらあきん坊</option>
414
+
415
+ <option value="3">さきがけの助</option>
416
+
417
+ <option value="4">ダラケ刀</option>
418
+
419
+ <option value="5">ザンバラ刀</option>
420
+
421
+ </select>
422
+
91
- </html>
423
+ </form>
424
+
425
+ </p>
426
+
427
+ <p>
428
+
429
+ <label for ="feelSelect">検証する技:</label>
430
+
431
+ <select id="atkType" name="feelSelect">
432
+
433
+ <option value="1">物理技の火力</option>
434
+
435
+ <option value="2">妖術技の火力</option>
436
+
437
+ </select>
438
+
439
+ </p>
440
+
441
+ <p>
442
+
443
+ <label for ="armSelect">装備:</label>
444
+
445
+ <select id="atkArm" name="armSelect">
446
+
447
+ <option value="a_densetsu">伝説の腕輪</option>
448
+
449
+ <option value="">その他</option>
450
+
451
+ </select>
452
+
453
+ </p>
454
+
455
+ </div>
456
+
457
+ <div class="main-downdown">
458
+
459
+ <label for="label1">計算する</label><!--ここがボタンです！jsファイルに繋がってます！-->
460
+
461
+ <input type="button" id="label1" onclick="changeframe_blue(); connect_data();" >
462
+
463
+ </div>
464
+
465
+ </div>
466
+
467
+ <div class="resultA" id="innerHTMLtxt"></div>
92
468
 
93
469
  ```
94
470
 
95
471
 
96
472
 
473
+ ### 画像
474
+
475
+
476
+
97
- ```javascript
477
+ なぜか画像貼れないです...
478
+
98
-
479
+ なのでエラ〜メッセージをコピペしました
480
+
481
+
482
+
99
-
483
+ > Uncaught TypeError: Illegal invocation
484
+
100
-
485
+ at i (jQuery-3.6.0.min.js:2)
486
+
487
+ at At (jQuery-3.6.0.min.js:2)
488
+
489
+ at At (jQuery-3.6.0.min.js:2)
490
+
491
+ at At (jQuery-3.6.0.min.js:2)
492
+
493
+ at Function.S.param (jQuery-3.6.0.min.js:2)
494
+
495
+ at Function.ajax (jQuery-3.6.0.min.js:2)
496
+
101
- function changeframe_blue() {
497
+ at connect_data (real.js:14)
102
-
103
- document.getElementById('innerHTMLtxt').style.borderColor = '#01eeff';
498
+
104
-
105
-
106
-
107
- }
108
-
109
- function getValue() {
110
-
111
- let atkId = new Option(document.getElementById("atkName").value);
112
-
113
- let atkType = new Option(document.getElementById("atkType").value);
499
+ at HTMLInputElement.onclick (（インデックス）:561)
114
-
115
- let atkArm = new Option(document.getElementById("atkArm").value);
500
+
116
-
117
- //省略
501
+
118
-
119
- var atkName = JSON.parse('<?php echo $atkName_json; ?>');
502
+
120
-
121
- var difName = JSON.parse('<?php echo $difName_json; ?>');
122
-
123
- var spe_name = JSON.parse('<?php echo $spe_name_json; ?>');
124
-
125
-
126
-
127
-
128
-
129
- //省略
130
-
131
- if(1==1)//この式も省略してます
503
+ connect_dataは$.ajaxの行を指してます
132
-
133
- {
504
+
134
-
135
-
136
-
137
- }else
505
+ HTMLはボタンの行です
138
-
139
- {
506
+
140
-
141
- howmanyTokill = Math.floor(howmanyTokill/100);
507
+ jQueryはほとんどが2行目にあるので特定不可です...
142
-
143
- innerHTMLtxt.innerHTML ="期待値は"+resultNum+"！";
508
+
144
-
145
- }
509
+
146
-
147
- }
510
+
148
-
149
-
150
-
151
-
152
-
153
- ```
511
+ よろしくお願いします

2

サイト消しました

2021/11/12 21:01

投稿

TrueRyoB
TrueRyoB

スコア79

test CHANGED
File without changes
test CHANGED
@@ -151,13 +151,3 @@
151
151
 
152
152
 
153
153
  ```
154
-
155
-
156
-
157
- 追記
158
-
159
- 私のサイトです。売名になるようでしたらすぐ消します。フォームを入力して「計算する」ボタンを押したら結果をでるようにしたいです。なんとなくイメージが伝わりやすいと思うので貼っておきますm(_ _)m
160
-
161
- 因みに今は機能していません(´･ω･`)
162
-
163
- https://ryorar.tokyo/

1

2021/11/12 06:59

投稿

TrueRyoB
TrueRyoB

スコア79

test CHANGED
File without changes
test CHANGED
@@ -151,3 +151,13 @@
151
151
 
152
152
 
153
153
  ```
154
+
155
+
156
+
157
+ 追記
158
+
159
+ 私のサイトです。売名になるようでしたらすぐ消します。フォームを入力して「計算する」ボタンを押したら結果をでるようにしたいです。なんとなくイメージが伝わりやすいと思うので貼っておきますm(_ _)m
160
+
161
+ 因みに今は機能していません(´･ω･`)
162
+
163
+ https://ryorar.tokyo/