※ ChatGPTを利用し、要約された質問です（原文：javascript のsyntaxについて）
JavaScriptのsyntaxについて
このQ&Aのポイント
JavaScriptを使用して任意の数の<input type='text' ..> タグを表示させる方法について質問です。
画像の上部にある「number of parts」の部分には入力する数を指定し、「inputBox()」関数を呼び出すようになっています。
しかし、入力した数だけの入力ボックスが表示されず、なぜかコメントアウトを解除して具体的な数を入力すると正常に動作します。どこが問題なのか教えてください。
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>
また、入力行が表示されるのは、なぜか別のページですが、これは今は気にしません。
詳しい方がいらっしゃいましたら、よろしくお願いいたします。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_2_thumbnail_img_sm.png)
お礼
詳しい説明の入ったご回答を頂き、有難うございます。 JavaScriptはとても奥が深いのですね。 近いうちにｊQueryなども勉強したいと思いますが、取りあえずはアドバイス頂いたようにdocument.createElement() を使ってやってみます。