JavaScriptのsyntaxについて

2018/11/18 17:20

このQ&Aのポイント

JavaScriptを使用して任意の数の<input type='text' ..> タグを表示させる方法について質問です。
画像の上部にある「number of parts」の部分には入力する数を指定し、「inputBox()」関数を呼び出すようになっています。
しかし、入力した数だけの入力ボックスが表示されず、なぜかコメントアウトを解除して具体的な数を入力すると正常に動作します。どこが問題なのか教えてください。

javascript のsyntaxについて

HTML文書でJavaScriptを使い、任意の数の<input type="text" .. > タグを表示させようとしています。添付の写真の上の方にある"number of parts" の部分が、その任意の数を入れる所で、隣のボタンを押すと関数 "inputBox()" を呼ぶようにしてあります。入力した任意の数だけwindow.document.write() で書かれた入力ボックスが出てくると思ったのですが、出てきません。 maxQty=window.document.getElementById("qty").value; によって取得した任意の数をforループで使っていますが、これが働いていないようです。　というのは、この文をコメントアウトして具体的な数を入れるとちゃんとその数だけの入力用の行が出てくるからです。どう考えてもこの文に間違いはないように思われますが、どこがおかしいのか、どなたか教えてくださいませんでしょうか。以下にソースコードをコピーします。 <!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> makeBOMtables.html</title> <script type="text/javascript"> </script> </head> <body bgcolor="navy" style="font-size:16pt; color:yellow"> <center> <h3>company name</h3> <h2>Product BOM List making Program</h2> <form method="POST" action="makeBOMtables.php"> <table border="1"> <tr><td>product number</td> <td> description </td><td>number of parts</td><td></td></tr> <tr> <td><input type="text" size="16" style="font-size:16pt" id="prodNum" name="prodNumx"/></td> <td><input type="text" size="50" style="font-size:16pt" id="prodName" name="prodNamex" /></td> <td><input type="text" size="5" style="font-size:16pt" id="qty" name="qtyx"/></td> <td><input type="button" value="make BOM" onclick="inputBox()"></td> </tr> </table> </br> <script > var maxQty; function inputBox(){ window.document.write("<html><head></head><body bgcolor='navy' style='font-size:16pt; color:yellow'><center>"); window.document.write("<table border='1'>"); window.document.write("<tr> <th>item #</th><th>part number</th> <th>description </th><th>we need</th>"); window.document.write(" <th>we have</th> <th></br></th></tr>"); // table header maxQty=window.document.getElementById("qty").value; for (var count=1; count<=maxQty; count++){ window.document.write("<tr>"); window.document.write("<td><input type='text' size='5' style='font-size:12pt' id='item"+ count + "' name='itemx"+ count +"' value="+ count +" /></td>" ); window.document.write("<td><input type='text' size='16' style='font-size:12pt' id='partNum"+ count + "' name='partNumx"+ count +"' /></td>" ); window.document.write("<td><input type='text' size='50' style='font-size:12pt' id='partName"+ count + "' name='partNamex"+ count +"' /></td>" ); window.document.write("<td><input type='text' size='5' style='font-size:12pt' id='qtyN"+ count +"' name='qtyNx"+ count + "' /></td>" ); window.document.write("<td><input type='text' size='5' style='font-size:12pt' id='qtyH"+ count +"' name='qtyHx"+ count + "' /></td>" ); window.document.write("<td><input type='submit' value='end input'/> </td>"); window.document.write("</tr>"); }// end for window.document.write("</center></body></html>"); } </script> </form> </center> </body> </html> また、入力行が表示されるのは、なぜか別のページですが、これは今は気にしません。詳しい方がいらっしゃいましたら、よろしくお願いいたします。

papashiroSooke
お礼率90% (517/571)

JavaScript
回答数3
ありがとう数3

みんなの回答 （3）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

superside0
ベストアンサー率64% (461/714)

2018/11/19 12:20 回答No.3

> document.write()　を使わずに、同じページの下側に入力ボックスを表示するには、どんなコマンドがあるのでしょうか？フルのHTMLをいちから作るのではなく、追加したい要素のみ（今回でいうとtable部）を document.createElement(～); で作って、それを現ドキュメントに親element,appendChild(createした要素); で挿入していきます。もしjQueryが使えるのなら、$(～).append(～)　とか $(～).after(～) とかでやったほうが簡単でしょう。これ以外にも、HTMLの都合や、挿入位置の指定方法の都合に合わせていろんな方法がありますので、"JavaScript 要素　追加"でググってみて下さい。

質問者

お礼 2018/11/19 15:37

詳しい説明の入ったご回答を頂き、有難うございます。 JavaScriptはとても奥が深いのですね。近いうちにｊQueryなども勉強したいと思いますが、取りあえずはアドバイス頂いたようにdocument.createElement() を使ってやってみます。

その他の回答 (2)

superside0
ベストアンサー率64% (461/714)

2018/11/18 18:56 回答No.2

> また、入力行が表示されるのは、なぜか別のページですが、これは今は気にしません。いや、まさにそれが原因で、getElementById()に失敗しています。 document.writeした時点でドキュメントは上書きされているのでそのあとは、当ドキュメント内にid=*qty"というエレメントがなくなってしまっています。 document.writeするまえに maxQty=window.document.getElementById("qty").value; を移動させればよいのですが、そもそも元の入力フォームが消えてほしくないのなら、 document.writeを使うべきではないでしょう。

質問者

お礼 2018/11/19 01:51

早速にご回答いただき、有難うございます。とてもよくわかる説明で、document.write() を使うと今のページが上書きされることは初めて知りました。自分は、今のページはそのままで、その下に入力ボックスが表示されるものと思っていました。ではdocument.write()　を使わずに、同じページの下側に入力ボックスを表示するには、どんなコマンドがあるのでしょうか？よろしければ教えてください。自分は初心者でJavaScript は始めたばかりで、jQuery や　JSON についての知識はまだありませんが、上に書いたことを実現するのに必要ならば勉強するつもりです。

maiko04
ベストアンサー率17% (345/1956)

2018/11/18 17:45 回答No.1

ならば maxQty=window.document.getElementById("qty").value; で得られたmaxQtyを表示すれば何が表示されますか？間違いを見てもらうのではなく、自分で突き止めることをしましょう。

質問者

お礼 2018/11/19 01:34

早速の回答有難うございます。 >maxQty=window.document.getElementById("qty").value; で得られたmaxQtyを表示すれば何が表示されますか？それは自分もやってみましたが何も表示されません。＞間違いを見てもらうのではなく、自分で突き止めることをしましょう。自分でいろいろ考えた挙句に、自分では解決の糸口が見えないから質問しているわけです。そういう便利さを提供してくれているのがこのOKWAVEではありませんか？人が何でも自分で問題を解決できるのなら、こんなサイトはいらないでしょう。とにかく、あなたが回答してくれたことに対しては私はちゃんとお礼を言ったので、これ以上あなたとはかかわりたくありません。 2度と私の質問に回答しないでください。

JavaScriptのsyntaxについて

javascript のsyntaxについて