teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

5

2021/12/14 14:42

投稿

mikitake
mikitake

スコア0

title CHANGED
File without changes
body CHANGED
@@ -1,90 +1,4 @@
1
1
  ### 前提・実現したいこと
2
2
 
3
3
  JQueryの読込・実行タイミングが
4
- PC/ネットワークなどの環境状態により変化する可能性があるのかどうか知りたいです。
4
+ PC/ネットワークなどの環境状態により変化する可能性があるのかどうか知りたいです。
5
-
6
- ### 発生している問題・エラーメッセージ
7
-
8
-
9
- 会社の業務で、簡単なお問い合わせフォームの開発担当をしています。
10
-
11
- あるボタンをクリックすると、setValという関数が実行され
12
- HTML側のinputのvalueに値をセットする動きになっています。
13
-
14
- ローカル・本番環境ともに、会社のPC・ネットワークを使って一通りのテストを行った結果
15
- 特にエラーはなく、正しく意図通りの動作をしています。(valueに値が正しくセットされる状態)
16
-
17
- しかし一部のお客様が入力すると、ボタンは押せてもそこに紐づく関数が実行されていないようで、
18
- valueが空のまま、という事象が発生しています。
19
-
20
- 一方で、valueに値がきちんとセットされているお客様もいらっしゃいます。
21
- userAgentの情報も確認しましたが、どちらのお客様も同じブラウザを利用していました。
22
-
23
- 追加でローカル環境で何度かテストした結果、ブラウザをリロードすると**3回に1回の頻度で**
24
- **JQueryのready関数実行前にwindow.onloadが動き、以下のエラーが発生しました。**
25
- `Uncaught ReferenceError: INPUT_Y is not defined`
26
-
27
- その結果、後続のclickイベントの追加ができていないことがわかりました。
28
-
29
- そこで、ローカル環境や、お客様のネットワーク状態においては
30
- **JQueryの読込/実行タイミングがずれ、意図しない動きになるのでは?**と考えました。
31
- (もちろん、INPUT_Yのような変数定義をやめると、当たり前ですが本事象は発生しなくなるのですが…。)
32
-
33
- ・JQueryの読込・実行タイミングが、PC/ネットワークなどの環境により変化する可能性があるのかどうか
34
- ・それらが、お客様の環境によって発生している可能性があるのか。
35
- ・それともこれはローカルだけの事象で、別にまだ原因はあるのか。
36
-
37
- この判断ができず、困っております。
38
-
39
-
40
-
41
- 恐れ入りますが、ご助力願えますでしょうか。
42
-
43
-
44
- ### 該当のソースコード
45
-
46
- ```HTML/javascript
47
- <!DOCTYPE html>
48
- <html lang="ja">
49
-
50
- <head>
51
- <title>タイトル</title>
52
- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
53
-
54
- <script>
55
-
56
- $(() => {
57
- INPUT_Y = document.getElementById('input_y');
58
- INPUT_M = document.getElementById('input_m');
59
- INPUT_D = document.getElementById('input_d');
60
- });
61
-
62
-   window.onload = () => {
63
- setYMD();
64
- $('[type="submit"]').on('click', e => {
65
- setVal();
66
- });
67
- }
68
-
69
- const setYMD = () => {
70
- INPUT_Y .value = '2020';
71
- INPUT_M .value = '01';
72
- INPUT_D .value = '01';
73
- }
74
-
75
- const setVal = () => {
76
- document.getElementById('input_val').value = 'AAA'
77
- }
78
- </script>
79
- </head>
80
- ~省略~
81
-
82
- ```
83
-
84
-
85
- ### 補足情報
86
- Chromeで開発・検証。お客様は主にChrome/Edgeで利用。
87
- ブラウザのjavascriptが起動していない場合は、判別して利用できないよう別画面へ遷移させています。
88
-
89
- そもそも、なぜこのような記述なのか?
90
-  →前任者の退職により引継いだ次第です。微妙なコードであることは私も認識しています…。

4

2021/12/14 14:42

投稿

mikitake
mikitake

スコア0

title CHANGED
File without changes
body CHANGED
@@ -49,8 +49,7 @@
49
49
 
50
50
  <head>
51
51
  <title>タイトル</title>
52
- <script src="https://code.jquery.com/jquery-3.6.0.min.js"
52
+ <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
53
- integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
54
53
 
55
54
  <script>
56
55
 

3

2021/12/14 14:30

投稿

mikitake
mikitake

スコア0

title CHANGED
File without changes
body CHANGED
@@ -85,6 +85,7 @@
85
85
 
86
86
  ### 補足情報
87
87
  Chromeで開発・検証。お客様は主にChrome/Edgeで利用。
88
+ ブラウザのjavascriptが起動していない場合は、判別して利用できないよう別画面へ遷移させています。
88
89
 
89
90
  そもそも、なぜこのような記述なのか?
90
91
   →前任者の退職により引継いだ次第です。微妙なコードであることは私も認識しています…。

2

2021/12/14 11:43

投稿

mikitake
mikitake

スコア0

title CHANGED
File without changes
body CHANGED
@@ -40,6 +40,7 @@
40
40
 
41
41
  恐れ入りますが、ご助力願えますでしょうか。
42
42
 
43
+
43
44
  ### 該当のソースコード
44
45
 
45
46
  ```HTML/javascript

1

2021/12/14 11:37

投稿

mikitake
mikitake

スコア0

title CHANGED
File without changes
body CHANGED
@@ -47,8 +47,6 @@
47
47
  <html lang="ja">
48
48
 
49
49
  <head>
50
- <meta name="robots" content="noindex,nofollow" />
51
- <meta charset="utf-8">
52
50
  <title>タイトル</title>
53
51
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"
54
52
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>