質問編集履歴

5

2021/12/14 14:42

投稿

mikitake
mikitake

スコア0

test CHANGED
File without changes
test CHANGED
@@ -5,175 +5,3 @@
5
5
  JQueryの読込・実行タイミングが
6
6
 
7
7
  PC/ネットワークなどの環境状態により変化する可能性があるのかどうか知りたいです。
8
-
9
-
10
-
11
- ### 発生している問題・エラーメッセージ
12
-
13
-
14
-
15
-
16
-
17
- 会社の業務で、簡単なお問い合わせフォームの開発担当をしています。
18
-
19
-
20
-
21
- あるボタンをクリックすると、setValという関数が実行され
22
-
23
- HTML側のinputのvalueに値をセットする動きになっています。
24
-
25
-
26
-
27
- ローカル・本番環境ともに、会社のPC・ネットワークを使って一通りのテストを行った結果
28
-
29
- 特にエラーはなく、正しく意図通りの動作をしています。(valueに値が正しくセットされる状態)
30
-
31
-
32
-
33
- しかし一部のお客様が入力すると、ボタンは押せてもそこに紐づく関数が実行されていないようで、
34
-
35
- valueが空のまま、という事象が発生しています。
36
-
37
-
38
-
39
- 一方で、valueに値がきちんとセットされているお客様もいらっしゃいます。
40
-
41
- userAgentの情報も確認しましたが、どちらのお客様も同じブラウザを利用していました。
42
-
43
-
44
-
45
- 追加でローカル環境で何度かテストした結果、ブラウザをリロードすると**3回に1回の頻度で**
46
-
47
- **JQueryのready関数実行前にwindow.onloadが動き、以下のエラーが発生しました。**
48
-
49
- `Uncaught ReferenceError: INPUT_Y is not defined`
50
-
51
-
52
-
53
- その結果、後続のclickイベントの追加ができていないことがわかりました。
54
-
55
-
56
-
57
- そこで、ローカル環境や、お客様のネットワーク状態においては
58
-
59
- **JQueryの読込/実行タイミングがずれ、意図しない動きになるのでは?**と考えました。
60
-
61
- (もちろん、INPUT_Yのような変数定義をやめると、当たり前ですが本事象は発生しなくなるのですが…。)
62
-
63
-
64
-
65
- ・JQueryの読込・実行タイミングが、PC/ネットワークなどの環境により変化する可能性があるのかどうか
66
-
67
- ・それらが、お客様の環境によって発生している可能性があるのか。
68
-
69
- ・それともこれはローカルだけの事象で、別にまだ原因はあるのか。
70
-
71
-
72
-
73
- この判断ができず、困っております。
74
-
75
-
76
-
77
-
78
-
79
-
80
-
81
- 恐れ入りますが、ご助力願えますでしょうか。
82
-
83
-
84
-
85
-
86
-
87
- ### 該当のソースコード
88
-
89
-
90
-
91
- ```HTML/javascript
92
-
93
- <!DOCTYPE html>
94
-
95
- <html lang="ja">
96
-
97
-
98
-
99
- <head>
100
-
101
- <title>タイトル</title>
102
-
103
- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
104
-
105
-
106
-
107
- <script>
108
-
109
-
110
-
111
- $(() => {
112
-
113
- INPUT_Y = document.getElementById('input_y');
114
-
115
- INPUT_M = document.getElementById('input_m');
116
-
117
- INPUT_D = document.getElementById('input_d');
118
-
119
- });
120
-
121
-
122
-
123
-   window.onload = () => {
124
-
125
- setYMD();
126
-
127
- $('[type="submit"]').on('click', e => {
128
-
129
- setVal();
130
-
131
- });
132
-
133
- }
134
-
135
-
136
-
137
- const setYMD = () => {
138
-
139
- INPUT_Y .value = '2020';
140
-
141
- INPUT_M .value = '01';
142
-
143
- INPUT_D .value = '01';
144
-
145
- }
146
-
147
-
148
-
149
- const setVal = () => {
150
-
151
- document.getElementById('input_val').value = 'AAA'
152
-
153
- }
154
-
155
- </script>
156
-
157
- </head>
158
-
159
- ~省略~
160
-
161
-
162
-
163
- ```
164
-
165
-
166
-
167
-
168
-
169
- ### 補足情報
170
-
171
- Chromeで開発・検証。お客様は主にChrome/Edgeで利用。
172
-
173
- ブラウザのjavascriptが起動していない場合は、判別して利用できないよう別画面へ遷移させています。
174
-
175
-
176
-
177
- そもそも、なぜこのような記述なのか?
178
-
179
-  →前任者の退職により引継いだ次第です。微妙なコードであることは私も認識しています…。

4

2021/12/14 14:42

投稿

mikitake
mikitake

スコア0

test CHANGED
File without changes
test CHANGED
@@ -100,9 +100,7 @@
100
100
 
101
101
  <title>タイトル</title>
102
102
 
103
- <script src="https://code.jquery.com/jquery-3.6.0.min.js"
103
+ <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
104
-
105
- integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
106
104
 
107
105
 
108
106
 

3

2021/12/14 14:30

投稿

mikitake
mikitake

スコア0

test CHANGED
File without changes
test CHANGED
@@ -172,6 +172,8 @@
172
172
 
173
173
  Chromeで開発・検証。お客様は主にChrome/Edgeで利用。
174
174
 
175
+ ブラウザのjavascriptが起動していない場合は、判別して利用できないよう別画面へ遷移させています。
176
+
175
177
 
176
178
 
177
179
  そもそも、なぜこのような記述なのか?

2

2021/12/14 11:43

投稿

mikitake
mikitake

スコア0

test CHANGED
File without changes
test CHANGED
@@ -79,6 +79,8 @@
79
79
 
80
80
 
81
81
  恐れ入りますが、ご助力願えますでしょうか。
82
+
83
+
82
84
 
83
85
 
84
86
 

1

2021/12/14 11:37

投稿

mikitake
mikitake

スコア0

test CHANGED
File without changes
test CHANGED
@@ -96,10 +96,6 @@
96
96
 
97
97
  <head>
98
98
 
99
- <meta name="robots" content="noindex,nofollow" />
100
-
101
- <meta charset="utf-8">
102
-
103
99
  <title>タイトル</title>
104
100
 
105
101
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"