お世話になっております。
Javascript,jQuery初心者です。
タイトルと質問内容がずれていたら申し訳ありません、ご指摘をお願い致します。
Androidベースのバーコードリーダーで
入力されたJANコードと個数を1セットとして、計20セットまで表示する画面を作成しています。
現在の仕様としては
JANコードを13桁分入力すると、JANコードと個数を自動で表示します。
個数が入力されていない場合はデフォルトで1が入り、1が表示されるようになっています。
ここで質問なのですが、
すでに一度読み取り、表示されているJANコードを、
再度読み取った場合に、新規でJANコードと個数を表示せず、
すでに表示されているJANコードの個数をカウントアップして表示したいと考え、
試行錯誤をしているのですが上手く行きません。
どのように書けば表現できるでしょうか?。
当方初心者のため、DOMを完全に理解しているわけではないため、
大変わかりづらく、拙いソースコードになっていると思われますが、
ご助言のほど、よろしくお願いいたします。
###稼働環境
Android6.0
Google Chrome 56.0
<!DOCTYPE html> <head> <meta charset="UTF-8"> <script src="jquery-3.3.1.min.js"></script> </head> <body> <br> <form name="form1" action="" method="post" > JAN <input type="text" id="jan_input" maxlength="13" > 個数 <input type="text" id="num_input" maxlength="3" value="1" > <div id="all_output"></div> <input type="submit" id="submit" value="送信"> </form> </body> <script> //JANコードを入力するテキストボックスへフォーカス document.form1.jan_input.focus() { const childs = all_output.childNodes; var c1 = 1; var c2 = 1; //JANコードのテキストボックスに13文字入ったときに処理する jan_input.oninput = e => { if(jan_input.value.length >= 13){ //JANコードのテキストボックスの生成 jan_input.name = "jan_code" + c1++; all_output.insertAdjacentHTML("beforeend", `JAN <input type="text" name="${jan_input.value}" value="${jan_input.value}" readonly />`); jan_input.name = ""; jan_input.value = ""; //個数のテキストボックスの生成 num_input.name = "num_code" + c2++; if(num_input.value == ""){ num_input.value = "1"; } all_output.insertAdjacentHTML("beforeend", ` 個数 <input type="text" name="${num_input.name}" value="${num_input.value}" /><br>`); num_input.name = ""; num_input.value = ""; } //JANコードの20個目を追加したときに処理 if(childs.length / 5 >= 20){ //JANコードのテキストボックスを入力不可にし、これ以上追加できないメッセージを出す。 jan_input.disabled = true; num_input.disabled = true; jan_input.style="color:#FF0000"; num_input.style="color:#FF0000"; jan_input.value = "これ以上追加できません"; num_input.value = "これ以上追加できません"; //送信ボタンにフォーカスする document.form1.submit.focus() } } } </script> </html>
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。