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

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

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

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

解決済

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

TakuTakahashi
TakuTakahashi

総合スコア9

JavaScript

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

1回答

0評価

1クリップ

546閲覧

投稿2021/12/27 05:30

編集2021/12/27 06:57

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

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

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

html

<table> <tbody> <tr> <td class="kdmn"> <fieldset> <input name="fluits" value="1" type="radio"></input> <label>りんご</label> <br> <input name="fluits" value="2" type="radio"></input> <label>みかん</label> </fieldset> </td> </tr> <tr> <td class="iro"> <fieldset> <input name="colors" value="1" type="radio"></input> <label>あか</label> <br> <input name="colors" value="2" type="radio"></input> <label>みどり</label> </fieldset> </td> </tr> <tr class="fukashi"> <td> <div class="date"> <input class="date" type="text"> </input> </div> </td> </tr> <tr class="fukashi"> <td> <div class="t_kdmn"> <input class="t_kdmn" type="text"> </input> </div> <div class="t_iro"> <input class="t_iro" type="text"> </input> </div> </td> </tr> </tbody> </table> <input value="Save" type="submit" id="id_submitbutton_save"></input>

Javascript

//時間 var timestmp = document.body.querySelector("input.date"); var subSave = document.getElementById('id_submitbutton_save'); subSave.addEventListener("click", function(evt0) { //代入と入力必須で使用 var radios = document.querySelectorAll("input[type=radio]"); var t_kdmn = document.querySelector("input.t_kdmn"); var t_iro = document.querySelector("input.t_iro"); //くだものを代入 if (radios[0].checked) { t_kdmn.value = "1"; } else if (radios[1].checked) { t_kdmn.value = "0"; } //色を代入 if (radios[2].checked) { t_iro.value = "1"; } else if (radios[3].checked) { t_iro.value = "0"; } timestmp.value = ""; var now = new Date(); var dayOfWeekStrJP = ["日", "月", "火", "水", "木", "金", "土"]; var datetime = ('0' + (now.getMonth() + 1)).slice(-2) + '/' + ('0' + now.getDate()).slice(-2) + '(' + dayOfWeekStrJP[now.getDay()] + ')' + ('0' + now.getHours()).slice(-2) + ':' + ('0' + now.getMinutes()).slice(-2); timestmp.value = datetime; if (!(radios[0].checked || radios[1].checked)) { // イベントキャンセル evt0.preventDefault(); alert("くだものを選択してください"); } if (!(radios[2].checked || radios[3].checked)) { // イベントキャンセル evt0.preventDefault(); alert("色を選択してください"); } evt0.stopPropagation(); // イベントの伝播を止める });

CSS

.fukashi { display: none; }

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

yambejp

2021/12/27 05:46

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

2021/12/27 06:50

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

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

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