解決済み

javascript のsyntaxについて

  • すぐに回答を!
  • 質問No.9559277
  • 閲覧数113
  • ありがとう数3
  • 気になる数0
  • 回答数3
  • コメント数0

お礼率 88% (299/336)

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>

また、入力行が表示されるのは、なぜか別のページですが、これは今は気にしません。
詳しい方がいらっしゃいましたら、よろしくお願いいたします。

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

  • 回答No.3

ベストアンサー率 66% (371/559)

> document.write() を使わずに、同じページの下側に入力ボックスを表示するには、どんなコマンドがあるのでしょうか?

フルのHTMLをいちから作るのではなく、追加したい要素のみ(今回でいうとtable部)を
document.createElement(~);
で作って、それを現ドキュメントに
親element,appendChild(createした要素);
で挿入していきます。
もしjQueryが使えるのなら、$(~).append(~) とか $(~).after(~) とかで
やったほうが簡単でしょう。

これ以外にも、HTMLの都合や、挿入位置の指定方法の都合に合わせて
いろんな方法がありますので、"JavaScript 要素 追加"でググってみて下さい。
お礼コメント
papashiroSooke

お礼率 88% (299/336)

詳しい説明の入ったご回答を頂き、有難うございます。
JavaScriptはとても奥が深いのですね。
近いうちにjQueryなども勉強したいと思いますが、取りあえずはアドバイス頂いたようにdocument.createElement() を使ってやってみます。
投稿日時 - 2018-11-19 15:37:52
感謝経済

その他の回答 (全2件)

  • 回答No.2

ベストアンサー率 66% (371/559)

> また、入力行が表示されるのは、なぜか別のページですが、これは今は気にしません。

いや、まさにそれが原因で、getElementById()に失敗しています。
document.writeした時点でドキュメントは上書きされているので
そのあとは、当ドキュメント内にid=*qty"というエレメントが
なくなってしまっています。

document.writeするまえに
maxQty=window.document.getElementById("qty").value;
を移動させればよいのですが、
そもそも元の入力フォームが消えてほしくないのなら、
document.writeを使うべきではないでしょう。
お礼コメント
papashiroSooke

お礼率 88% (299/336)

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

ベストアンサー率 19% (35/182)

ならば
maxQty=window.document.getElementById("qty").value;
で得られたmaxQtyを表示すれば何が表示されますか?

間違いを見てもらうのではなく、自分で突き止めることをしましょう。
お礼コメント
papashiroSooke

お礼率 88% (299/336)

早速の回答有難うございます。

>maxQty=window.document.getElementById("qty").value;
で得られたmaxQtyを表示すれば何が表示されますか?

それは自分もやってみましたが何も表示されません。

>間違いを見てもらうのではなく、自分で突き止めることをしましょう。

自分でいろいろ考えた挙句に、自分では解決の糸口が見えないから質問しているわけです。そういう便利さを提供してくれているのがこのOKWAVEではありませんか?
人が何でも自分で問題を解決できるのなら、こんなサイトはいらないでしょう。
とにかく、あなたが回答してくれたことに対しては私はちゃんとお礼を言ったので、これ以上あなたとはかかわりたくありません。
2度と私の質問に回答しないでください。
投稿日時 - 2018-11-19 01:34:46
AIエージェント「あい」

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,500万件のQ&Aを分析して最適な回答をご提案します。

関連するQ&A
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する

特集


感謝指数をマイページで確認!

ピックアップ

ページ先頭へ