質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

1280閲覧

たまにJavascript(addEventListener)が動作しない

TakuTakahashi

総合スコア10

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2021/12/27 05:30

編集2021/12/27 06:58

仕様
入力必須の2つのラジオボタンから成る入力フォーム2組があり、Saveボタンをクリックすると不可視にしている3つのテキストボックスそれぞれに、保存日時、2組のラジオボタンの選択状況を1か0に変換して保存しています。
エラー内容
このページには1日に数十から150件前後の入力があり、数百件に1件程度、不可視のテキストボックスに何も保存されない入力データが発生します。入力端末はiPhoneのSafariが確認されていますが全件確認できていません。このエラーは特定の時間、ユーザに限定されません。
知りたいこと
再現ができず、困っています。原因が分かる方がいらっしゃいましたらご教示いただけますと幸いです。よろしくお願いいたします。

追記
テキストボックスにrequiredを設定してはとコメントをいただきました。
ユーザの画面上はラジオボタンが正しく選択されているのに「不可視のテキストボックス」のrequired設定のために保存できなくなると混乱を招くかと思い、手を出せないでいます。 現状は空欄が発生した時にメールを管理者に飛ばすようにして管理者側で修正しています。

また、最初ユーザ側で「javascriptを使用しない」設定でもしているのかと思いましたが確認できた数人は通常の使用でした。

html

1<table> 2 <tbody> 3 <tr> 4 <td class="kdmn"> 5 <fieldset> 6 <input name="fluits" value="1" type="radio"></input> 7 <label>りんご</label> 8 <br> 9 <input name="fluits" value="2" type="radio"></input> 10 <label>みかん</label> 11 </fieldset> 12 </td> 13 </tr> 14 <tr> 15 <td class="iro"> 16 <fieldset> 17 <input name="colors" value="1" type="radio"></input> 18 <label>あか</label> 19 <br> 20 <input name="colors" value="2" type="radio"></input> 21 <label>みどり</label> 22 </fieldset> 23 </td> 24 </tr> 25 <tr class="fukashi"> 26 <td> 27 <div class="date"> 28 <input class="date" type="text"> 29 </input> 30 </div> 31 </td> 32 </tr> 33 <tr class="fukashi"> 34 <td> 35 <div class="t_kdmn"> 36 <input class="t_kdmn" type="text"> 37 </input> 38 </div> 39 <div class="t_iro"> 40 <input class="t_iro" type="text"> 41 </input> 42 </div> 43 </td> 44 </tr> 45 </tbody> 46</table> 47<input value="Save" type="submit" id="id_submitbutton_save"></input>

Javascript

1 //時間 2 var timestmp = document.body.querySelector("input.date"); 3 var subSave = document.getElementById('id_submitbutton_save'); 4 subSave.addEventListener("click", function(evt0) { 5 //代入と入力必須で使用 6 var radios = document.querySelectorAll("input[type=radio]"); 7 var t_kdmn = document.querySelector("input.t_kdmn"); 8 var t_iro = document.querySelector("input.t_iro"); 9 //くだものを代入 10 if (radios[0].checked) { 11 t_kdmn.value = "1"; 12 } else if (radios[1].checked) { 13 t_kdmn.value = "0"; 14 } 15 //色を代入 16 if (radios[2].checked) { 17 t_iro.value = "1"; 18 } else if (radios[3].checked) { 19 t_iro.value = "0"; 20 } 21 timestmp.value = ""; 22 var now = new Date(); 23 var dayOfWeekStrJP = ["日", "月", "火", "水", "木", "金", "土"]; 24 var datetime = ('0' + (now.getMonth() + 1)).slice(-2) + 25 '/' + ('0' + now.getDate()).slice(-2) + 26 '(' + dayOfWeekStrJP[now.getDay()] + ')' + 27 ('0' + now.getHours()).slice(-2) + ':' + 28 ('0' + now.getMinutes()).slice(-2); 29 timestmp.value = datetime; 30 if (!(radios[0].checked || radios[1].checked)) { 31 // イベントキャンセル 32 evt0.preventDefault(); 33 alert("くだものを選択してください"); 34 } 35 if (!(radios[2].checked || radios[3].checked)) { 36 // イベントキャンセル 37 evt0.preventDefault(); 38 alert("色を選択してください"); 39 } 40 evt0.stopPropagation(); // イベントの伝播を止める 41 });

CSS

1.fukashi { 2 display: none; 3}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2021/12/27 05:46

よくわかりませんが「可視のテキストボックスに何も保存されない入力データが発生」を防ぎたいだけならrequired設定だけでなんとかなりませんか?クライアント側の不正処理のせいかもしれないのでサーバー側でもバリデートは必要かもしれませんが
TakuTakahashi

2021/12/27 06:50

コメントありがとうございます。ユーザの画面上はラジオボタンが正しく選択されているのに「不可視のテキストボックス」のrequired設定のために保存できなくなると混乱を招くかと思い、手を出せないでいます。 現状は空欄が発生した時にメールを管理者に飛ばすようにして管理者側で修正しています。(後出しで申し訳ありません)
guest

回答1

0

ベストアンサー

非表示データがユーザーに混乱させるという認識があるなら
そもそも非表示データが必要かどうかから検証が必要でしょうね
送信時に追加データを付加するにはonformdata処理が可能です

またonsubmit時に送信前のバリデートチェックをするのも有効です。
ロジックに問題がない自信があるならページバックやリロードなど特殊な処理をされたことも
疑ってみてください
ごくごくレアケースなら、サーバー側のバリデートでエラーを検知して
再入力を促すのが妥当だと思います

投稿2021/12/27 07:15

yambejp

総合スコア116724

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

TakuTakahashi

2021/12/28 13:05

onformdataについてご教示いただきありがとうございます。じっくり勉強して試してみようと思います。エラー時のケアについてもいろいろな方向からご提示いただきありがとうございます。 何度もご回答いただき恐縮ですが、よろしければ最後にもう一度お伺いしたいです。今回の私の例は別として、JavaScriptという言語自体にWebページでの挙動において、「プログラムとして正しくてもたまに機能しない」という現象は可能性としてあるのでしょうか。私の周りに経験者がおらず、独学のためネット上で色々検索してみましたがよくわかりませんでした。何卒よろしくお願いいたします。
TakuTakahashi

2022/01/05 01:37

この度は年末も押し迫った中ご回答いただきありがとうございました。最後に質問の内容を外してしまい失礼いたしました。運用中につき次回更新が数ヶ月後、再現不能ということもあり具体的な結果を今ご報告できませんが方向性はいただけたと思います。ありがとうございました。
yambejp

2022/01/05 01:55 編集

解決していないのであればBAにせず、自己解決扱いで経過観察中としておいたほうがよいです
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問