質問編集履歴
7
現状説明
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
jQueryを介して画面ロードなしでbottun -> js -> phpでdbからデータ回収 -> jsで計算 を実行しようとしてます。
|
|
4
4
|
現在jQueryの読み込み関係のエラーに詰まってます
|
|
5
5
|
実行環境はMAMPです
|
|
6
|
+
現在はミニマムコードで検証中です
|
|
6
7
|
|
|
7
8
|
> jquery.min.js:2 jQuery.Deferred exception: $(...).on(...).fail is not a function TypeError: $(...).on(...).fail is not a function
|
|
8
9
|
at HTMLDocument.<anonymous> (https://ryorar.tokyo/for_jquery.js:56:12)
|
6
コードと問題点の更新
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,133 +1,223 @@
|
|
|
1
1
|
### 問題点
|
|
2
2
|
|
|
3
3
|
jQueryを介して画面ロードなしでbottun -> js -> phpでdbからデータ回収 -> jsで計算 を実行しようとしてます。
|
|
4
|
-
現在
|
|
4
|
+
現在jQueryの読み込み関係のエラーに詰まってます
|
|
5
|
-
詳しくは下のエラーを見ていただければと思います
|
|
6
5
|
実行環境はMAMPです
|
|
7
6
|
|
|
7
|
+
> jquery.min.js:2 jQuery.Deferred exception: $(...).on(...).fail is not a function TypeError: $(...).on(...).fail is not a function
|
|
8
|
+
at HTMLDocument.<anonymous> (https://ryorar.tokyo/for_jquery.js:56:12)
|
|
9
|
+
at j (https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js:2:29999)
|
|
10
|
+
at k (https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js:2:30313) undefined
|
|
11
|
+
r.Deferred.exceptionHook @ jquery.min.js:2
|
|
12
|
+
jquery.min.js:2 Uncaught TypeError: $(...).on(...).fail is not a function
|
|
13
|
+
at HTMLDocument.<anonymous> (for_jquery.js:56)
|
|
14
|
+
at j (jquery.min.js:2)
|
|
15
|
+
at k (jquery.min.js:2)
|
|
16
|
+
|
|
8
17
|
### コード
|
|
9
18
|
|
|
19
|
+
DB接続呼びかけ用jsコード(for_jquery.js)
|
|
20
|
+
```javascript
|
|
10
21
|
|
|
22
|
+
$(function(){
|
|
23
|
+
$('#innerHTMLtxt').on("click",function(){//idのボタンが押されたらこれが発動するらしい...onclickの進化系！
|
|
24
|
+
const atkId = new Option(document.getElementById("atkName").value);
|
|
25
|
+
const difId = new Option(document.getElementById("difName").value);
|
|
11
26
|
|
|
12
|
-
|
|
27
|
+
$.post({
|
|
28
|
+
url: 'find_value.php',//新しいphpファイルの名前にするよ
|
|
29
|
+
data:{'opt': 'connect_database','atkId':atkId, 'difId':difId},//わいの愛しのidちゃんたちを書いていく！！
|
|
30
|
+
dataType: 'json', //必須。json形式で返すように設定（テンションの差よ）（マジレスマン）（いいね正解大卒）
|
|
31
|
+
}).done(function(atkArray,difArray,weaponArray){
|
|
32
|
+
var atkAH= atkArray[0];
|
|
33
|
+
var atkAA= atkArray[1];
|
|
34
|
+
var atkAM= atkArray[2];
|
|
35
|
+
var atkAD= atkArray[3];
|
|
36
|
+
var atkAS= atkArray[4];
|
|
37
|
+
var atkBH= atkArray[5];
|
|
38
|
+
var atkBA= atkArray[6];
|
|
39
|
+
var atkBM= atkArray[7];
|
|
40
|
+
var atkBD= atkArray[8];
|
|
41
|
+
var atkBS= atkArray[9];
|
|
42
|
+
var atkSkill= atkArray[10];
|
|
43
|
+
var atkName= atkArray[11];
|
|
44
|
+
var atkVisu= atkArray[12];
|
|
45
|
+
var weapona_name= atkArray[13];
|
|
46
|
+
var weaponm_name= atkArray[14];
|
|
47
|
+
var spe_type= atkArray[15];
|
|
48
|
+
var spe_damage= atkArray[16];
|
|
49
|
+
var spe_num= atkArray[17];
|
|
50
|
+
var spe_name= atkArray[18];
|
|
51
|
+
|
|
52
|
+
var difAH= difArray[0];
|
|
53
|
+
var difAA= difArray[1];
|
|
54
|
+
var difAM= difArray[2];
|
|
55
|
+
var difAD= difArray[3];
|
|
56
|
+
var difAS= difArray[4];
|
|
57
|
+
var difBH= difArray[5];
|
|
58
|
+
var difBA= difArray[6];
|
|
59
|
+
var difBM= difArray[7];
|
|
60
|
+
var difBD= difArray[8];
|
|
61
|
+
var difBS= difArray[9];
|
|
62
|
+
var difSkill= difArray[10];
|
|
63
|
+
var difVisu= difArray[11];
|
|
64
|
+
var difName= difArray[12];
|
|
65
|
+
|
|
66
|
+
var weapona_dam= weaponArray[0];
|
|
67
|
+
var weapona_num= weaponArray[1];
|
|
68
|
+
var weaponm_dam= weaponArray[2];
|
|
69
|
+
var weaponm_attribute= weaponArray[3];
|
|
70
|
+
var weaponm_heal= weaponArray[4];
|
|
71
|
+
|
|
72
|
+
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);
|
|
73
|
+
//getValue関数に、入手したデータを送ります！
|
|
74
|
+
})
|
|
75
|
+
}).fail(function(XMLHttpRequest, textStatus, error){
|
|
76
|
+
alert(error);
|
|
77
|
+
|
|
78
|
+
})
|
|
79
|
+
|
|
80
|
+
})
|
|
81
|
+
|
|
82
|
+
```
|
|
83
|
+
DB接続用コード(find_value.php)
|
|
13
84
|
```php
|
|
14
85
|
<?php
|
|
15
|
-
//ファイル名はfunction.phpです
|
|
16
|
-
function get_txt_content($atk_name){//DB接続用関数です
|
|
17
86
|
|
|
87
|
+
$atkArray = array();//変数宣言
|
|
88
|
+
$difArray = array();
|
|
89
|
+
$weaponArray = array();
|
|
90
|
+
$atkId = filter_input(INPUT_POST,"atkId"); //変数の出力
|
|
91
|
+
$difId = filter_input(INPUT_POST,"difId");
|
|
92
|
+
|
|
93
|
+
|
|
94
|
+
if( isset($atkId))//わんちゃんissetで変数を受け取った後関数を実行的なのができるかも
|
|
95
|
+
{
|
|
18
96
|
try {
|
|
19
97
|
|
|
20
|
-
|
|
98
|
+
// データベースに接続
|
|
21
|
-
|
|
99
|
+
$pdo = new PDO(
|
|
22
|
-
|
|
100
|
+
'mysql:dbname=ryorar;host=127.0.0.1;charset=utf8mb4',
|
|
23
|
-
|
|
101
|
+
'viewers',
|
|
24
|
-
|
|
102
|
+
'Mypass1!',
|
|
25
|
-
|
|
103
|
+
[
|
|
26
|
-
|
|
104
|
+
PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
|
|
27
|
-
|
|
105
|
+
PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
|
|
28
|
-
|
|
106
|
+
]
|
|
29
|
-
|
|
107
|
+
);//今から、それぞれのカラム名つき、int指定込みで配列にデータを入れるコマンドを探す！締めはechoとexit!
|
|
30
108
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
109
|
+
//ここでは、アタッカーのyokai_dataDBから手に入る変数を入れる 1をpost atkIdに変える
|
|
110
|
+
$stmt =$pdo->prepare('SELECT * FROM yokai_data WHERE id = :id');
|
|
111
|
+
$stmt->bindValue(':id', $atkId);
|
|
112
|
+
$stmt->execute();
|
|
113
|
+
foreach($stmt as $row)
|
|
114
|
+
{
|
|
115
|
+
$atkStatus_a_h = (int)$row['status_a_h'];//dif
|
|
116
|
+
$atkStatus_a_a = (int)$row['status_a_a'];
|
|
117
|
+
$atkStatus_a_m = (int)$row['status_a_m'];
|
|
118
|
+
$atkStatus_a_d = (int)$row['status_a_d'];
|
|
119
|
+
$atkStatus_a_s = (int)$row['status_a_s'];
|
|
120
|
+
$atkStatus_b_h = (int)$row['status_b_h'];
|
|
121
|
+
$atkStatus_b_a = (int)$row['status_b_a'];
|
|
122
|
+
$atkStatus_b_m = (int)$row['status_b_m'];
|
|
123
|
+
$atkStatus_b_d = (int)$row['status_b_d'];
|
|
124
|
+
$atkStatus_b_s = (int)$row['status_b_s'];
|
|
125
|
+
$atkSkill = $row['skill_name'];//dif
|
|
126
|
+
$weapon_a = $row['weapon_a'];//none
|
|
127
|
+
$weapon_m = $row['weapon_m'];//none
|
|
128
|
+
$atkName = $row['yokai_name'];//dif
|
|
129
|
+
$atkVisu = $row['visu'];//dif
|
|
130
|
+
$spe_type = $row['spe_type'];//none
|
|
131
|
+
$spe_damage = $row['spe_damage'];
|
|
132
|
+
$spe_num = $row['spe_num'];
|
|
133
|
+
$spe_name = $row['spe_name'];
|
|
134
|
+
}
|
|
135
|
+
//データ読み込みを一部省略
|
|
136
|
+
|
|
137
|
+
$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);
|
|
40
138
|
|
|
41
|
-
|
|
139
|
+
$weaponArray =array($weapon_a_dam,$weapon_a_num,$weapon_m_dam,$weapon_m_attribute,$weapon_m_heal);
|
|
140
|
+
|
|
42
|
-
|
|
141
|
+
$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);
|
|
142
|
+
|
|
43
|
-
|
|
143
|
+
$pdo =null;
|
|
44
144
|
|
|
45
|
-
|
|
145
|
+
} catch (PDOException $e) {
|
|
46
146
|
header('Content-Type: text/plain; charset=UTF-8', true, 500);
|
|
47
147
|
exit($e->getMessage());
|
|
48
148
|
|
|
49
|
-
}
|
|
149
|
+
}
|
|
50
150
|
|
|
51
|
-
// エラーが発生した場合は「500 Internal Server Error」でテキストとして表示して終了する
|
|
52
|
-
// - もし手抜きしたくない場合は普通にHTMLの表示を継続する
|
|
53
|
-
// - ここではエラー内容を表示しているが， 実際の商用環境ではログファイルに記録して， Webブラウザには出さないほうが望ましい
|
|
54
|
-
header('Content-Type: text/plain; charset=UTF-8', true, 500);
|
|
55
|
-
exit($e->getMessage());
|
|
56
|
-
|
|
57
|
-
}
|
|
58
|
-
|
|
59
151
|
}
|
|
60
152
|
|
|
61
|
-
$func = $_POST['func'];//jsから送られたデータで関数を実行させようとしてるところです
|
|
62
|
-
$atkId = $_POST['argument'];
|
|
63
|
-
echo
|
|
153
|
+
echo json_encode($atkArray,$difArray,$weaponArray); //この値をfor_jquery.jsファイルに返します
|
|
154
|
+
exit; //処理の終了
|
|
64
155
|
|
|
65
156
|
?>
|
|
66
157
|
```
|
|
67
158
|
|
|
68
|
-
|
|
159
|
+
計算コード(real.js)
|
|
69
160
|
```javascript
|
|
70
|
-
const atkId = '1';
|
|
71
|
-
const element = document.getElementById('txt_field');
|
|
72
161
|
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
//下のメモに詳しく書いてます
|
|
162
|
+
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)
|
|
163
|
+
{//引数はそのまま使ってます
|
|
164
|
+
let atkId = new Option(document.getElementById("atkName").value);
|
|
165
|
+
let atkType = new Option(document.getElementById("atkType").value);
|
|
166
|
+
let atkArm = new Option(document.getElementById("atkArm").value);
|
|
167
|
+
let atkLevel = new Option(document.getElementById("atkLevel").value);
|
|
168
|
+
//少し省略
|
|
169
|
+
var realAtkStatusH = atkAH + 0.010204 * (atkLevel-1) * (atkHpchange + atkBH - atkAH);
|
|
82
170
|
|
|
171
|
+
//めちゃ省略してます
|
|
172
|
+
else
|
|
173
|
+
{//火力がインフレしてる時
|
|
174
|
+
howmanyTokill = Math.floor(howmanyTokill/100);
|
|
175
|
+
innerHTMLtxt.innerHTML ="期待値は"+resultNum+"なので、"+atkName+"の"+spe_name+"Gで"+difName+"が"+howmanyTokill+"体吹き飛びます! 命中率は"+(500-missingCount)/(500*spe_num)*100+"です！";
|
|
83
|
-
}
|
|
176
|
+
}
|
|
84
|
-
.fail(function(xhr) {
|
|
85
|
-
alert("失敗！");
|
|
86
|
-
}
|
|
177
|
+
}
|
|
87
|
-
.always(function(xhr, msg) {
|
|
88
|
-
});
|
|
89
|
-
|
|
90
178
|
```
|
|
91
|
-
<メモ>
|
|
92
|
-
しかし、開発画面の方では
|
|
93
|
-
> Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')
|
|
94
179
|
|
|
95
|
-
と表示されちゃいました...responseがダメみたいです phpファイルにデータを送れたのはいいものの、responseがないからこうなってるのではと考察してます
|
|
96
180
|
|
|
97
|
-
|
|
181
|
+
htmlコード(index.php)
|
|
98
|
-
|
|
99
182
|
```html
|
|
183
|
+
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
|
100
|
-
<
|
|
184
|
+
<html>
|
|
101
|
-
<html lang="jp">
|
|
102
185
|
<head>
|
|
186
|
+
<link rel="shortcut icon" href="icon.ico">
|
|
187
|
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
188
|
+
<meta http-equiv="Content-Style-Type" content="text/css">
|
|
189
|
+
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,user-scalable=no">
|
|
190
|
+
<link rel="stylesheet" href="stylesheet.css">
|
|
191
|
+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
|
|
192
|
+
<script type="text/javascript" src="real.js"></script><!--上に、先にjQuery読み込んでます！-->
|
|
193
|
+
<script type="text/javascript" src="for_jquery.js"></script>
|
|
103
|
-
<title>
|
|
194
|
+
<title>妖怪ウォッチ2ダメージ計算</title>
|
|
195
|
+
</head>
|
|
104
196
|
|
|
105
|
-
<meta charset="utf-8">
|
|
106
|
-
<meta name="description" content="">
|
|
107
|
-
<meta name="author" content="">
|
|
108
|
-
<meta name="keywords" content="">
|
|
109
|
-
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
110
|
-
|
|
111
|
-
</head>
|
|
112
197
|
<body>
|
|
113
|
-
<!--
|
|
198
|
+
<!--しばらく省略-->
|
|
199
|
+
<label for ="attackerSelect">妖怪の名前:</label>
|
|
200
|
+
<select id="atkName" name="attackerSelect">
|
|
201
|
+
<option value="1">妖怪の種類を選択</option>
|
|
202
|
+
<option value="1">ぶようじん坊</option>
|
|
203
|
+
<option value="2">がらあきん坊</option>
|
|
204
|
+
<option value="3">さきがけの助</option>
|
|
205
|
+
<option value="4">ダラケ刀</option>
|
|
206
|
+
<option value="5">ザンバラ刀</option>
|
|
207
|
+
</select><!--ここのデータを、for_jquery.jsファイルが拾ってます！difNameも同様です-->
|
|
208
|
+
<!--しばらく省略-->
|
|
114
209
|
|
|
115
|
-
<
|
|
210
|
+
<div class="main-downdown">
|
|
211
|
+
<label for="label1">計算する</label>
|
|
116
|
-
<
|
|
212
|
+
<input type="button" id="label1" onclick="changeframe_blue();" ><!--ここのボタンでfor_jqueryファイルを起動させます！-->
|
|
213
|
+
</div>
|
|
117
|
-
<
|
|
214
|
+
<div class="resultA" id="innerHTMLtxt"></div><!--ここに、getValueでの計算結果が映し出されます-->
|
|
118
215
|
|
|
119
|
-
<!-- 自分で作成したJavaScriptを読み込む -->
|
|
120
|
-
<script src="challenge.js"></script>
|
|
121
|
-
|
|
122
|
-
<div id="txt_field"></div>//ここを更新する策略です
|
|
123
|
-
</body>
|
|
124
|
-
</html>
|
|
125
216
|
```
|
|
126
217
|
|
|
127
|
-
### 画像
|
|
128
218
|
|
|
129
|
-
|
|
219
|
+
### エラーとその画像
|
|
130
|
-
|
|
131
220
|
|
|
221
|
+
どうやら、ajaxの一部のコード(fail文当たり)とjQueryにエラーが発生してるようです ボタンを押しても何も発生してません。
|
|
132
|
-
|
|
222
|
+
このコードを更新し終わって、mtsさんの教えていただいたことを理解した後にコードを細分化して再度検証してきます。
|
|
133
|
-
|
5
コードや問題点の更新
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,23 +1,22 @@
|
|
|
1
1
|
### 問題点
|
|
2
2
|
|
|
3
3
|
jQueryを介して画面ロードなしでbottun -> js -> phpでdbからデータ回収 -> jsで計算 を実行しようとしてます。
|
|
4
|
-
現在
|
|
4
|
+
現在phpファイルが動かないところで詰まっています
|
|
5
5
|
詳しくは下のエラーを見ていただければと思います
|
|
6
|
+
実行環境はMAMPです
|
|
6
7
|
|
|
7
8
|
### コード
|
|
8
9
|
|
|
9
10
|
|
|
10
11
|
|
|
11
|
-
DB接続用コード
|
|
12
|
+
DB接続用コード(試験的)
|
|
12
13
|
```php
|
|
13
14
|
<?php
|
|
15
|
+
//ファイル名はfunction.phpです
|
|
16
|
+
function get_txt_content($atk_name){//DB接続用関数です
|
|
14
17
|
|
|
15
|
-
function connect_with_data($atkId, $difId)
|
|
16
|
-
{//jsの命令で発動させる関数です 引数はjsから持ってきてます
|
|
17
18
|
try {
|
|
18
19
|
|
|
19
|
-
/* リクエストから得たスーパーグローバル変数をチェックするなどの処理 */
|
|
20
|
-
|
|
21
20
|
// データベースに接続
|
|
22
21
|
$pdo = new PDO(
|
|
23
22
|
'mysql:dbname=ryorar;host=127.0.0.1;charset=utf8mb4',
|
|
@@ -28,229 +27,107 @@
|
|
|
28
27
|
PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
|
|
29
28
|
]
|
|
30
29
|
);
|
|
31
|
-
|
|
32
|
-
|
|
30
|
+
|
|
33
31
|
$stmt =$pdo->prepare('SELECT * FROM yokai_data WHERE id = :id');
|
|
34
|
-
$stmt->bindValue(':id', $
|
|
32
|
+
$stmt->bindValue(':id', $atk_name);
|
|
35
33
|
$stmt->execute();
|
|
36
34
|
foreach($stmt as $row)
|
|
37
35
|
{
|
|
38
|
-
$atkStatus_a_h = (int)$row['status_a_h'];//dif
|
|
39
|
-
$atkStatus_a_a = (int)$row['status_a_a'];
|
|
40
|
-
$atkStatus_a_m = (int)$row['Status_a_m'];
|
|
41
|
-
$atkStatus_a_d = (int)$row['status_a_d'];
|
|
42
|
-
$atkStatus_a_s = (int)$row['status_a_s'];
|
|
43
|
-
$atkStatus_b_h = (int)$row['status_d_h'];
|
|
44
|
-
$atkStatus_b_a = (int)$row['status_b_a'];
|
|
45
|
-
$atkStatus_b_m = (int)$row['status_b_m'];
|
|
46
|
-
$atkStatus_b_d = (int)$row['status_b_d'];
|
|
47
|
-
$atkStatus_b_s = (int)$row['status_b_s'];
|
|
48
|
-
$atkSkill = $row['skill_name'];//dif
|
|
49
|
-
$weapon_a = $row['weapon_a'];//none
|
|
50
|
-
$weapon_m = $row['weapon_m'];//none
|
|
51
|
-
$atkName = $row['yokai_name'];//dif
|
|
52
|
-
$atkVisu = $row['visu'];//dif
|
|
53
|
-
$spe_type = $row['spe_type'];//none
|
|
54
|
-
$spe_damage = $row['spe_damage'];
|
|
55
|
-
$spe_num = $row['spe_num'];
|
|
56
|
-
$
|
|
36
|
+
$atkSkill = $row['skill_name'];
|
|
57
37
|
}
|
|
58
|
-
|
|
59
|
-
|
|
38
|
+
|
|
60
|
-
$stmt->bindValue(':wea', $weapon_a);
|
|
61
|
-
$stmt->execute();
|
|
62
|
-
foreach($stmt as $row)
|
|
63
|
-
{
|
|
64
|
-
$weapon_a_dam = (int)$row['damage'];
|
|
65
|
-
$weapon_a_num = (int)$row['num'];
|
|
66
|
-
}
|
|
67
|
-
$stmt =$pdo->prepare('SELECT * FROM weapon WHERE weapon_name = :wea');
|
|
68
|
-
$stmt->bindValue(':wea', $weapon_m);
|
|
69
|
-
$stmt->execute();
|
|
70
|
-
foreach($stmt as $row)
|
|
71
|
-
{
|
|
72
|
-
$weapon_m_dam = (int)$row['damage'];
|
|
73
|
-
$weapon_m_attribute = (int)$row['weapon'];
|
|
74
|
-
$weapon_m_heal = (int)$row['heal'];
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
//今からひたすらにjsonに書き換える
|
|
78
|
-
$spe_type_json = json_encode( $spe_type );
|
|
79
|
-
$spe_damage_json = json_encode( $spe_damage );
|
|
80
|
-
$spe_num_json = json_encode( $spe_num );
|
|
81
|
-
$atkAH_json = json_encode( $atkStatus_a_h );
|
|
82
|
-
$atkAA_json = json_encode( $atkStatus_a_a );
|
|
83
|
-
$atkAM_json = json_encode( $atkStatus_a_m );
|
|
84
|
-
$atkAD_json = json_encode( $atkStatus_a_d );
|
|
85
|
-
$atkAS_json = json_encode( $atkStatus_a_s );
|
|
86
|
-
$atkBH_json = json_encode( $atkStatus_b_h );
|
|
87
|
-
$atkBA_json = json_encode( $atkStatus_b_a );
|
|
88
|
-
$atkBM_json = json_encode( $atkStatus_b_m );
|
|
89
|
-
$atkBD_json = json_encode( $atkStatus_b_d );
|
|
90
|
-
$atkBS_json = json_encode( $atkStatus_b_s );
|
|
91
|
-
$difAH_json = json_encode( $difStatus_a_h );
|
|
92
|
-
$difAA_json = json_encode( $difStatus_a_a );
|
|
93
|
-
$difAM_json = json_encode( $difStatus_a_m );
|
|
94
|
-
$difAD_json = json_encode( $difStatus_a_d );
|
|
95
|
-
$difAS_json = json_encode( $difStatus_a_s );
|
|
96
|
-
$difBH_json = json_encode( $difStatus_b_h );
|
|
97
|
-
$difBA_json = json_encode( $difStatus_b_a );
|
|
98
|
-
$difBM_json = json_encode( $difStatus_b_m );
|
|
99
|
-
$difBD_json = json_encode( $difStatus_b_d );
|
|
100
|
-
$difBS_json = json_encode( $difStatus_b_s );
|
|
101
|
-
$weapon_a_dam_json = json_encode( $weapon_a_dam);
|
|
102
|
-
$weapon_a_num_json = json_encode( $weapon_a_num);
|
|
103
|
-
$weapon_m_dam_json = json_encode( $weapon_m_dam);
|
|
104
|
-
$weapon_m_attribute_json = json_encode( $weapon_m_attribute);
|
|
105
|
-
$weapon_m_heal_json = json_encode( $weapon_m_heal);
|
|
106
|
-
|
|
39
|
+
$atkSkill_json = json_encode( $atkSkill );
|
|
40
|
+
|
|
107
|
-
|
|
41
|
+
return $atkSkill_json;//これでjsにデータ返却を試みます
|
|
108
|
-
$weaponaName_json = json_encode( $weapon_a );
|
|
109
|
-
$weaponmName_json = json_encode( $weapon_m );
|
|
110
42
|
|
|
111
|
-
|
|
43
|
+
$pdo =null;
|
|
112
44
|
|
|
113
45
|
} catch (PDOException $e) {
|
|
114
|
-
|
|
115
46
|
header('Content-Type: text/plain; charset=UTF-8', true, 500);
|
|
116
47
|
exit($e->getMessage());
|
|
117
48
|
|
|
49
|
+
} catch (PDOException $e) {
|
|
50
|
+
|
|
51
|
+
// エラーが発生した場合は「500 Internal Server Error」でテキストとして表示して終了する
|
|
52
|
+
// - もし手抜きしたくない場合は普通にHTMLの表示を継続する
|
|
53
|
+
// - ここではエラー内容を表示しているが， 実際の商用環境ではログファイルに記録して， Webブラウザには出さないほうが望ましい
|
|
54
|
+
header('Content-Type: text/plain; charset=UTF-8', true, 500);
|
|
55
|
+
exit($e->getMessage());
|
|
56
|
+
|
|
118
57
|
}
|
|
119
|
-
|
|
58
|
+
|
|
120
59
|
}
|
|
121
|
-
//ここなんですがまだ把握し切ってなかったので変更してないです 取り敢えずjsの処理が済んだらこっちに手つけます
|
|
122
60
|
|
|
61
|
+
$func = $_POST['func'];//jsから送られたデータで関数を実行させようとしてるところです
|
|
62
|
+
$atkId = $_POST['argument'];
|
|
63
|
+
echo $func($atkId);//前回echoコマンドの表記を忘れていたので変な感じになりましたが、送られたデータで関数実行というのは恐らくこのことだと思います
|
|
64
|
+
|
|
123
65
|
?>
|
|
124
66
|
```
|
|
125
67
|
|
|
68
|
+
こちらのjsもjQueryなどの接続を確かめるものです
|
|
126
69
|
```javascript
|
|
70
|
+
const atkId = '1';
|
|
71
|
+
const element = document.getElementById('txt_field');
|
|
127
72
|
|
|
73
|
+
$.ajax({
|
|
128
|
-
|
|
74
|
+
type:'post',
|
|
75
|
+
url:'http://localhost:8888/function.php',//mampで実行してるのでlocalが88888です
|
|
129
|
-
|
|
76
|
+
data:{'func':'get_txt_content','argument':atkId},
|
|
130
|
-
|
|
77
|
+
dataType:'json',
|
|
131
|
-
|
|
78
|
+
})
|
|
79
|
+
.done(function(response) {
|
|
80
|
+
element.innerHTML = "<p>"+response+"</p>";//接続成功した時に、returnで返却された変数をhtmlに入力するという打算です
|
|
81
|
+
//下のメモに詳しく書いてます
|
|
132
82
|
|
|
133
|
-
//新しく関数connect_dataを作りました jQueryを呼びます
|
|
134
|
-
function connect_data(){
|
|
135
|
-
|
|
136
|
-
let atkId = new Option(document.getElementById("atkName").value);
|
|
137
|
-
let difId = new Option(document.getElementById("difName").value);
|
|
138
|
-
|
|
139
|
-
$.ajax({
|
|
140
|
-
url: 'find_value.php', //アクセスするURL
|
|
141
|
-
type: 'post',//全角消しました！
|
|
142
|
-
cache: false, //cacheを使うか使わないかを設定
|
|
143
|
-
dataType:'json', //data type script・xmlDocument・jsonなど
|
|
144
|
-
data:{'func' : 'connect_with_data', 'atkId': atkId, 'difId': difId }, //アクセスするときに必要なデータを記載
|
|
145
|
-
|
|
83
|
+
})
|
|
146
|
-
|
|
84
|
+
.fail(function(xhr) {
|
|
147
|
-
|
|
85
|
+
alert("失敗！");
|
|
148
|
-
|
|
149
|
-
|
|
86
|
+
})
|
|
150
|
-
.fail(function(xhr) {
|
|
151
|
-
//ここは多分書いた方がいいけどまだ手をつけてません...次回見直すときここも修正します
|
|
152
|
-
})
|
|
153
|
-
|
|
87
|
+
.always(function(xhr, msg) {
|
|
154
|
-
|
|
155
88
|
});
|
|
89
|
+
|
|
90
|
+
```
|
|
91
|
+
<メモ>
|
|
92
|
+
しかし、開発画面の方では
|
|
93
|
+
> Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')
|
|
156
94
|
|
|
157
|
-
|
|
95
|
+
と表示されちゃいました...responseがダメみたいです phpファイルにデータを送れたのはいいものの、responseがないからこうなってるのではと考察してます
|
|
158
96
|
|
|
97
|
+
下のhtmlも試験的なものに更新しました。jQueryは古いバージョンのものをネットから読み込む形にしたら上手く接続できました
|
|
159
98
|
|
|
99
|
+
```html
|
|
160
|
-
|
|
100
|
+
<!DOCTYPE html>
|
|
161
|
-
let atkId = new Option(document.getElementById("atkName").value);//フォームから値を読み込んでます
|
|
162
|
-
let atkType = new Option(document.getElementById("atkType").value);
|
|
163
|
-
|
|
101
|
+
<html lang="jp">
|
|
164
|
-
|
|
102
|
+
<head>
|
|
165
|
-
var atkName = JSON.parse('<?php echo $atkName_json; ?>');//phpで入手したデータを取り込んでます
|
|
166
|
-
var difName = JSON.parse('<?php echo $difName_json; ?>');
|
|
167
|
-
var spe_name = JSON.parse('<?php echo $spe_name_json; ?>');
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
//省略
|
|
171
|
-
|
|
103
|
+
<title>サンプルページ</title>
|
|
172
|
-
{
|
|
173
104
|
|
|
174
|
-
|
|
105
|
+
<meta charset="utf-8">
|
|
106
|
+
<meta name="description" content="">
|
|
175
|
-
|
|
107
|
+
<meta name="author" content="">
|
|
108
|
+
<meta name="keywords" content="">
|
|
176
|
-
|
|
109
|
+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
177
|
-
}
|
|
178
|
-
}
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
```
|
|
182
110
|
|
|
183
|
-
```html
|
|
184
|
-
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
|
185
|
-
<html>
|
|
186
|
-
<head>
|
|
187
|
-
<script src="jQuery-3.6.0.min.js"></script>
|
|
188
|
-
<script type="text/javascript" src="real.js"></script>//順列を変更いたしました！
|
|
189
111
|
</head>
|
|
190
|
-
|
|
191
112
|
<body>
|
|
192
|
-
|
|
113
|
+
<!-- ここからHTMLでマークアップする -->
|
|
193
|
-
<h2 class="icon-sentence">妖怪ウォッチ２ダメージ計算</h2>
|
|
194
|
-
<img class="topicon" src="iconimg.jpeg" width="150px";>
|
|
195
|
-
</div>
|
|
196
114
|
|
|
197
|
-
|
|
115
|
+
<!-- JQeryを読み込む -->
|
|
116
|
+
<!--<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>-->
|
|
117
|
+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
|
|
118
|
+
|
|
198
|
-
|
|
119
|
+
<!-- 自分で作成したJavaScriptを読み込む -->
|
|
199
|
-
<div class= "attack-input">
|
|
200
|
-
<p class=ababab>アタッカーの設定</p>
|
|
201
|
-
<p>
|
|
202
|
-
<form action="index.php" method="post">
|
|
203
|
-
|
|
120
|
+
<script src="challenge.js"></script>
|
|
204
|
-
|
|
121
|
+
|
|
205
|
-
|
|
122
|
+
<div id="txt_field"></div>//ここを更新する策略です
|
|
206
|
-
<option value="1">ぶようじん坊</option>
|
|
207
|
-
<option value="2">がらあきん坊</option>
|
|
208
|
-
<option value="3">さきがけの助</option>
|
|
209
|
-
<option value="4">ダラケ刀</option>
|
|
210
|
-
<option value="5">ザンバラ刀</option>
|
|
211
|
-
</select>
|
|
212
|
-
|
|
123
|
+
</body>
|
|
213
|
-
</p>
|
|
214
|
-
<p>
|
|
215
|
-
<label for ="feelSelect">検証する技:</label>
|
|
216
|
-
<select id="atkType" name="feelSelect">
|
|
217
|
-
<option value="1">物理技の火力</option>
|
|
218
|
-
<option value="2">妖術技の火力</option>
|
|
219
|
-
</select>
|
|
220
|
-
</p>
|
|
221
|
-
<p>
|
|
222
|
-
<label for ="armSelect">装備:</label>
|
|
223
|
-
<select id="atkArm" name="armSelect">
|
|
224
|
-
<option value="a_densetsu">伝説の腕輪</option>
|
|
225
|
-
<option value="">その他</option>
|
|
226
|
-
</select>
|
|
227
|
-
</p>
|
|
228
|
-
|
|
124
|
+
</html>
|
|
229
|
-
<div class="main-downdown">
|
|
230
|
-
<label for="label1">計算する</label><!--ここがボタンです！jsファイルに繋がってます！-->
|
|
231
|
-
<input type="button" id="label1" onclick="changeframe_blue(); connect_data();" >
|
|
232
|
-
</div>
|
|
233
|
-
</div>
|
|
234
|
-
<div class="resultA" id="innerHTMLtxt"></div>
|
|
235
125
|
```
|
|
236
126
|
|
|
237
127
|
### 画像
|
|
238
128
|
|
|
239
|
-
なぜか画像貼れないです...
|
|
240
|
-
|
|
129
|
+
index.php(htmlファイル)を実行したときの様子
|
|
130
|
+
|
|
241
131
|
|
|
132
|
+
function.phpが使えない様子
|
|
242
|
-
|
|
133
|
+
|
|
243
|
-
at i (jQuery-3.6.0.min.js:2)
|
|
244
|
-
at At (jQuery-3.6.0.min.js:2)
|
|
245
|
-
at At (jQuery-3.6.0.min.js:2)
|
|
246
|
-
at At (jQuery-3.6.0.min.js:2)
|
|
247
|
-
at Function.S.param (jQuery-3.6.0.min.js:2)
|
|
248
|
-
at Function.ajax (jQuery-3.6.0.min.js:2)
|
|
249
|
-
at connect_data (real.js:14)
|
|
250
|
-
at HTMLInputElement.onclick (（インデックス）:561)
|
|
251
|
-
|
|
252
|
-
connect_dataは$.ajaxの行を指してます
|
|
253
|
-
HTMLはボタンの行です
|
|
254
|
-
jQueryはほとんどが2行目にあるので特定不可です...
|
|
255
|
-
|
|
256
|
-
よろしくお願いします
|
4
コードの更新
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -138,7 +138,7 @@
|
|
|
138
138
|
|
|
139
139
|
$.ajax({
|
|
140
140
|
url: 'find_value.php', //アクセスするURL
|
|
141
|
-
type: 'post',
|
|
141
|
+
type: 'post',//全角消しました！
|
|
142
142
|
cache: false, //cacheを使うか使わないかを設定
|
|
143
143
|
dataType:'json', //data type script・xmlDocument・jsonなど
|
|
144
144
|
data:{'func' : 'connect_with_data', 'atkId': atkId, 'difId': difId }, //アクセスするときに必要なデータを記載
|
|
@@ -184,8 +184,8 @@
|
|
|
184
184
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
|
185
185
|
<html>
|
|
186
186
|
<head>
|
|
187
|
+
<script src="jQuery-3.6.0.min.js"></script>
|
|
187
|
-
<script type="text/javascript" src="real.js"></script>
|
|
188
|
+
<script type="text/javascript" src="real.js"></script>//順列を変更いたしました！
|
|
188
|
-
<script src="jQuery-3.6.0.min.js"></script><!--ここでjQueryを読み込んでますが、エラーが起きてしまってます(´･_･`) バージョンはあってますよ！-->
|
|
189
189
|
</head>
|
|
190
190
|
|
|
191
191
|
<body>
|
3
コードの更新
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,49 +1,126 @@
|
|
|
1
1
|
### 問題点
|
|
2
2
|
|
|
3
|
-
私が今作っているのは、「埋められたフォーム」(html)に応じて「DBから持ってきたデータ」(php)を「javascriptに渡して計算させる」(javascript)プログラムです。
|
|
4
|
-
ボタンを押すのをトリガーにしたくて、以下のコードを作ったのですが、上手く行きません。何がいけないのでしょうか？ご教授お願い致しますm(_ _)m
|
|
5
|
-
|
|
3
|
+
jQueryを介して画面ロードなしでbottun -> js -> phpでdbからデータ回収 -> jsで計算 を実行しようとしてます。
|
|
4
|
+
現在jQueryの実装段階で詰まっています
|
|
5
|
+
詳しくは下のエラーを見ていただければと思います
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
### コード
|
|
8
|
-
htmlファイルもphpにしたため、今はひとつのファイルの中に2つの言語が入ってる状態になってます
|
|
9
|
-
javascriptはonclick属性で起動させるのが一番なのですが、**phpで入手したデータを使わないといけない**のでphpの最後の方で起動させてます。
|
|
10
|
-
ちなみに、changeframe_blue関数はちゃんと起動します
|
|
11
8
|
|
|
9
|
+
|
|
10
|
+
|
|
12
|
-
|
|
11
|
+
DB接続用コード
|
|
13
12
|
```php
|
|
14
13
|
<?php
|
|
15
14
|
|
|
16
|
-
|
|
15
|
+
function connect_with_data($atkId, $difId)
|
|
17
|
-
{
|
|
18
|
-
echo '<script language=javascript>alert("ダイアログ表示")</script>';
|
|
19
|
-
|
|
16
|
+
{//jsの命令で発動させる関数です 引数はjsから持ってきてます
|
|
20
|
-
echo '<script>getValue();</script>';
|
|
21
|
-
//上のこれが本命です
|
|
22
|
-
|
|
23
17
|
try {
|
|
24
18
|
|
|
25
|
-
|
|
19
|
+
/* リクエストから得たスーパーグローバル変数をチェックするなどの処理 */
|
|
26
20
|
|
|
21
|
+
// データベースに接続
|
|
22
|
+
$pdo = new PDO(
|
|
23
|
+
'mysql:dbname=ryorar;host=127.0.0.1;charset=utf8mb4',
|
|
24
|
+
'viewers',
|
|
25
|
+
'Mypass1!',
|
|
26
|
+
[
|
|
27
|
+
PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
|
|
28
|
+
PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
|
|
29
|
+
]
|
|
30
|
+
);
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
$stmt =$pdo->prepare('SELECT * FROM yokai_data WHERE id = :id');
|
|
34
|
+
$stmt->bindValue(':id', $atkId);
|
|
35
|
+
$stmt->execute();
|
|
36
|
+
foreach($stmt as $row)
|
|
37
|
+
{
|
|
38
|
+
$atkStatus_a_h = (int)$row['status_a_h'];//dif
|
|
39
|
+
$atkStatus_a_a = (int)$row['status_a_a'];
|
|
40
|
+
$atkStatus_a_m = (int)$row['Status_a_m'];
|
|
41
|
+
$atkStatus_a_d = (int)$row['status_a_d'];
|
|
42
|
+
$atkStatus_a_s = (int)$row['status_a_s'];
|
|
43
|
+
$atkStatus_b_h = (int)$row['status_d_h'];
|
|
44
|
+
$atkStatus_b_a = (int)$row['status_b_a'];
|
|
45
|
+
$atkStatus_b_m = (int)$row['status_b_m'];
|
|
46
|
+
$atkStatus_b_d = (int)$row['status_b_d'];
|
|
47
|
+
$atkStatus_b_s = (int)$row['status_b_s'];
|
|
48
|
+
$atkSkill = $row['skill_name'];//dif
|
|
49
|
+
$weapon_a = $row['weapon_a'];//none
|
|
50
|
+
$weapon_m = $row['weapon_m'];//none
|
|
51
|
+
$atkName = $row['yokai_name'];//dif
|
|
52
|
+
$atkVisu = $row['visu'];//dif
|
|
53
|
+
$spe_type = $row['spe_type'];//none
|
|
54
|
+
$spe_damage = $row['spe_damage'];
|
|
55
|
+
$spe_num = $row['spe_num'];
|
|
56
|
+
$spe_name = $row['spe_name'];
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
$stmt =$pdo->prepare('SELECT * FROM weapon WHERE weapon_name = :wea');//ここは、weaponaゾーン difは必要ないのだ
|
|
60
|
+
$stmt->bindValue(':wea', $weapon_a);
|
|
61
|
+
$stmt->execute();
|
|
62
|
+
foreach($stmt as $row)
|
|
63
|
+
{
|
|
64
|
+
$weapon_a_dam = (int)$row['damage'];
|
|
65
|
+
$weapon_a_num = (int)$row['num'];
|
|
66
|
+
}
|
|
67
|
+
$stmt =$pdo->prepare('SELECT * FROM weapon WHERE weapon_name = :wea');
|
|
68
|
+
$stmt->bindValue(':wea', $weapon_m);
|
|
69
|
+
$stmt->execute();
|
|
70
|
+
foreach($stmt as $row)
|
|
71
|
+
{
|
|
72
|
+
$weapon_m_dam = (int)$row['damage'];
|
|
73
|
+
$weapon_m_attribute = (int)$row['weapon'];
|
|
74
|
+
$weapon_m_heal = (int)$row['heal'];
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
//今からひたすらにjsonに書き換える
|
|
78
|
+
$spe_type_json = json_encode( $spe_type );
|
|
79
|
+
$spe_damage_json = json_encode( $spe_damage );
|
|
80
|
+
$spe_num_json = json_encode( $spe_num );
|
|
81
|
+
$atkAH_json = json_encode( $atkStatus_a_h );
|
|
82
|
+
$atkAA_json = json_encode( $atkStatus_a_a );
|
|
83
|
+
$atkAM_json = json_encode( $atkStatus_a_m );
|
|
84
|
+
$atkAD_json = json_encode( $atkStatus_a_d );
|
|
85
|
+
$atkAS_json = json_encode( $atkStatus_a_s );
|
|
86
|
+
$atkBH_json = json_encode( $atkStatus_b_h );
|
|
87
|
+
$atkBA_json = json_encode( $atkStatus_b_a );
|
|
88
|
+
$atkBM_json = json_encode( $atkStatus_b_m );
|
|
89
|
+
$atkBD_json = json_encode( $atkStatus_b_d );
|
|
90
|
+
$atkBS_json = json_encode( $atkStatus_b_s );
|
|
91
|
+
$difAH_json = json_encode( $difStatus_a_h );
|
|
92
|
+
$difAA_json = json_encode( $difStatus_a_a );
|
|
93
|
+
$difAM_json = json_encode( $difStatus_a_m );
|
|
94
|
+
$difAD_json = json_encode( $difStatus_a_d );
|
|
95
|
+
$difAS_json = json_encode( $difStatus_a_s );
|
|
96
|
+
$difBH_json = json_encode( $difStatus_b_h );
|
|
97
|
+
$difBA_json = json_encode( $difStatus_b_a );
|
|
98
|
+
$difBM_json = json_encode( $difStatus_b_m );
|
|
99
|
+
$difBD_json = json_encode( $difStatus_b_d );
|
|
100
|
+
$difBS_json = json_encode( $difStatus_b_s );
|
|
101
|
+
$weapon_a_dam_json = json_encode( $weapon_a_dam);
|
|
102
|
+
$weapon_a_num_json = json_encode( $weapon_a_num);
|
|
103
|
+
$weapon_m_dam_json = json_encode( $weapon_m_dam);
|
|
104
|
+
$weapon_m_attribute_json = json_encode( $weapon_m_attribute);
|
|
105
|
+
$weapon_m_heal_json = json_encode( $weapon_m_heal);
|
|
106
|
+
$atkSkill_json = json_encode( $atkSkill );
|
|
107
|
+
$difSkill_json = json_encode( $difSkill );
|
|
108
|
+
$weaponaName_json = json_encode( $weapon_a );
|
|
109
|
+
$weaponmName_json = json_encode( $weapon_m );
|
|
110
|
+
|
|
111
|
+
$pdo =null;
|
|
112
|
+
|
|
27
|
-
} catch (PDOException $e) {
|
|
113
|
+
} catch (PDOException $e) {
|
|
28
114
|
|
|
115
|
+
header('Content-Type: text/plain; charset=UTF-8', true, 500);
|
|
29
|
-
|
|
116
|
+
exit($e->getMessage());
|
|
117
|
+
|
|
118
|
+
}
|
|
119
|
+
header('Content-Type: text/html; charset=utf-8');
|
|
120
|
+
}
|
|
121
|
+
//ここなんですがまだ把握し切ってなかったので変更してないです 取り敢えずjsの処理が済んだらこっちに手つけます
|
|
30
122
|
|
|
31
|
-
}
|
|
32
|
-
}
|
|
33
|
-
header('Content-Type: text/html; charset=utf-8');
|
|
34
123
|
?>
|
|
35
|
-
|
|
36
|
-
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
|
37
|
-
<html>
|
|
38
|
-
|
|
39
|
-
<!--省略-->
|
|
40
|
-
<div class="main-downdown">
|
|
41
|
-
<label for="label1">計算する</label>
|
|
42
|
-
<form method="post" action="index.php">
|
|
43
|
-
<input type="button" value="実行" name="s" id="label1" onclick="changeframe_blue();" > <!--ここでボタンを押します-->
|
|
44
|
-
</form>
|
|
45
|
-
</div>
|
|
46
|
-
</html>
|
|
47
124
|
```
|
|
48
125
|
|
|
49
126
|
```javascript
|
|
@@ -52,12 +129,40 @@
|
|
|
52
129
|
document.getElementById('innerHTMLtxt').style.borderColor = '#01eeff';
|
|
53
130
|
|
|
54
131
|
}
|
|
132
|
+
|
|
133
|
+
//新しく関数connect_dataを作りました jQueryを呼びます
|
|
134
|
+
function connect_data(){
|
|
135
|
+
|
|
136
|
+
let atkId = new Option(document.getElementById("atkName").value);
|
|
137
|
+
let difId = new Option(document.getElementById("difName").value);
|
|
138
|
+
|
|
139
|
+
$.ajax({
|
|
140
|
+
url: 'find_value.php', //アクセスするURL
|
|
141
|
+
type: 'post', //post or get
|
|
142
|
+
cache: false, //cacheを使うか使わないかを設定
|
|
143
|
+
dataType:'json', //data type script・xmlDocument・jsonなど
|
|
144
|
+
data:{'func' : 'connect_with_data', 'atkId': atkId, 'difId': difId }, //アクセスするときに必要なデータを記載
|
|
145
|
+
})
|
|
146
|
+
.done(function(response) { //正常に処理が完了した時
|
|
147
|
+
getValue();//成功した時に、計算用関数（下にあるやつ）を実行するようにします！
|
|
148
|
+
|
|
149
|
+
})
|
|
150
|
+
.fail(function(xhr) {
|
|
151
|
+
//ここは多分書いた方がいいけどまだ手をつけてません...次回見直すときここも修正します
|
|
152
|
+
})
|
|
153
|
+
.always(function(xhr, msg) {
|
|
154
|
+
|
|
155
|
+
});
|
|
156
|
+
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
|
|
55
160
|
function getValue() {
|
|
56
|
-
let atkId = new Option(document.getElementById("atkName").value);
|
|
161
|
+
let atkId = new Option(document.getElementById("atkName").value);//フォームから値を読み込んでます
|
|
57
162
|
let atkType = new Option(document.getElementById("atkType").value);
|
|
58
163
|
let atkArm = new Option(document.getElementById("atkArm").value);
|
|
59
164
|
//省略
|
|
60
|
-
var atkName = JSON.parse('<?php echo $atkName_json; ?>');
|
|
165
|
+
var atkName = JSON.parse('<?php echo $atkName_json; ?>');//phpで入手したデータを取り込んでます
|
|
61
166
|
var difName = JSON.parse('<?php echo $difName_json; ?>');
|
|
62
167
|
var spe_name = JSON.parse('<?php echo $spe_name_json; ?>');
|
|
63
168
|
|
|
@@ -66,12 +171,86 @@
|
|
|
66
171
|
if(1==1)//この式も省略してます
|
|
67
172
|
{
|
|
68
173
|
|
|
69
|
-
}else
|
|
174
|
+
}else//計算してます
|
|
70
175
|
{
|
|
71
|
-
howmanyTokill = Math.floor(howmanyTokill/100);
|
|
72
|
-
innerHTMLtxt.innerHTML ="期待値は"+resultNum+"！";
|
|
176
|
+
innerHTMLtxt.innerHTML ="期待値は"+resultNum+"！";//htmlの結果表示欄はデフォルトでは空白にしてあります。ここを埋めることで更新しようと考えてます！
|
|
73
177
|
}
|
|
74
178
|
}
|
|
75
179
|
|
|
76
180
|
|
|
77
|
-
```
|
|
181
|
+
```
|
|
182
|
+
|
|
183
|
+
```html
|
|
184
|
+
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
|
185
|
+
<html>
|
|
186
|
+
<head>
|
|
187
|
+
<script type="text/javascript" src="real.js"></script>
|
|
188
|
+
<script src="jQuery-3.6.0.min.js"></script><!--ここでjQueryを読み込んでますが、エラーが起きてしまってます(´･_･`) バージョンはあってますよ！-->
|
|
189
|
+
</head>
|
|
190
|
+
|
|
191
|
+
<body>
|
|
192
|
+
<div class="top">
|
|
193
|
+
<h2 class="icon-sentence">妖怪ウォッチ２ダメージ計算</h2>
|
|
194
|
+
<img class="topicon" src="iconimg.jpeg" width="150px";>
|
|
195
|
+
</div>
|
|
196
|
+
|
|
197
|
+
<div class= "main">
|
|
198
|
+
<div class= "main-upper">
|
|
199
|
+
<div class= "attack-input">
|
|
200
|
+
<p class=ababab>アタッカーの設定</p>
|
|
201
|
+
<p>
|
|
202
|
+
<form action="index.php" method="post">
|
|
203
|
+
<label for ="attackerSelect">妖怪の名前:</label>
|
|
204
|
+
<select id="atkName" name="attackerSelect">
|
|
205
|
+
<option value="1">妖怪の種類を選択</option>
|
|
206
|
+
<option value="1">ぶようじん坊</option>
|
|
207
|
+
<option value="2">がらあきん坊</option>
|
|
208
|
+
<option value="3">さきがけの助</option>
|
|
209
|
+
<option value="4">ダラケ刀</option>
|
|
210
|
+
<option value="5">ザンバラ刀</option>
|
|
211
|
+
</select>
|
|
212
|
+
</form>
|
|
213
|
+
</p>
|
|
214
|
+
<p>
|
|
215
|
+
<label for ="feelSelect">検証する技:</label>
|
|
216
|
+
<select id="atkType" name="feelSelect">
|
|
217
|
+
<option value="1">物理技の火力</option>
|
|
218
|
+
<option value="2">妖術技の火力</option>
|
|
219
|
+
</select>
|
|
220
|
+
</p>
|
|
221
|
+
<p>
|
|
222
|
+
<label for ="armSelect">装備:</label>
|
|
223
|
+
<select id="atkArm" name="armSelect">
|
|
224
|
+
<option value="a_densetsu">伝説の腕輪</option>
|
|
225
|
+
<option value="">その他</option>
|
|
226
|
+
</select>
|
|
227
|
+
</p>
|
|
228
|
+
</div>
|
|
229
|
+
<div class="main-downdown">
|
|
230
|
+
<label for="label1">計算する</label><!--ここがボタンです！jsファイルに繋がってます！-->
|
|
231
|
+
<input type="button" id="label1" onclick="changeframe_blue(); connect_data();" >
|
|
232
|
+
</div>
|
|
233
|
+
</div>
|
|
234
|
+
<div class="resultA" id="innerHTMLtxt"></div>
|
|
235
|
+
```
|
|
236
|
+
|
|
237
|
+
### 画像
|
|
238
|
+
|
|
239
|
+
なぜか画像貼れないです...
|
|
240
|
+
なのでエラ〜メッセージをコピペしました
|
|
241
|
+
|
|
242
|
+
> Uncaught TypeError: Illegal invocation
|
|
243
|
+
at i (jQuery-3.6.0.min.js:2)
|
|
244
|
+
at At (jQuery-3.6.0.min.js:2)
|
|
245
|
+
at At (jQuery-3.6.0.min.js:2)
|
|
246
|
+
at At (jQuery-3.6.0.min.js:2)
|
|
247
|
+
at Function.S.param (jQuery-3.6.0.min.js:2)
|
|
248
|
+
at Function.ajax (jQuery-3.6.0.min.js:2)
|
|
249
|
+
at connect_data (real.js:14)
|
|
250
|
+
at HTMLInputElement.onclick (（インデックス）:561)
|
|
251
|
+
|
|
252
|
+
connect_dataは$.ajaxの行を指してます
|
|
253
|
+
HTMLはボタンの行です
|
|
254
|
+
jQueryはほとんどが2行目にあるので特定不可です...
|
|
255
|
+
|
|
256
|
+
よろしくお願いします
|
2
サイト消しました
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -74,9 +74,4 @@
|
|
|
74
74
|
}
|
|
75
75
|
|
|
76
76
|
|
|
77
|
-
```
|
|
77
|
+
```
|
|
78
|
-
|
|
79
|
-
追記
|
|
80
|
-
私のサイトです。売名になるようでしたらすぐ消します。フォームを入力して「計算する」ボタンを押したら結果をでるようにしたいです。なんとなくイメージが伝わりやすいと思うので貼っておきますm(_ _)m
|
|
81
|
-
因みに今は機能していません(´･ω･`)
|
|
82
|
-
https://ryorar.tokyo/
|
1
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -74,4 +74,9 @@
|
|
|
74
74
|
}
|
|
75
75
|
|
|
76
76
|
|
|
77
|
-
```
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
追記
|
|
80
|
+
私のサイトです。売名になるようでしたらすぐ消します。フォームを入力して「計算する」ボタンを押したら結果をでるようにしたいです。なんとなくイメージが伝わりやすいと思うので貼っておきますm(_ _)m
|
|
81
|
+
因みに今は機能していません(´･ω･`)
|
|
82
|
+
https://ryorar.tokyo/
|