回答受付中の質問
JavaScriptを使って、プルダウンメニューで商品と数量を選択した後に追加ボタンを...
tadayuhoさん
JavaScriptを使って、プルダウンメニューで商品と数量を選択した後に追加ボタンを押すと直下のテーブルに商品の情報と数量の合計を表示させるプログラム(簡易レジ)で、テーブルに追加させる部分が上手くいきません。
HTMLとJavaScriptのソースを以下に貼り付けますので、どのようにすればテーブルにプルダウンで選んだデータが入った状態で行が追加できるようになるかお教えいただけますでしょうか？
HTML
<html>
<head>
<script type="text/javascript" src="object-1.js"></script>
<link type="text/css" href="object-1.css" rel="stylesheet">
</head>
<body>
<script type="text/javascript">
<!--
// -->
</script>
<form name="selbox">
<select name="goodsNo">
<option value="" selected>商品</option>
<option value="goodsList[0]">コーラ</option>
<option value="goodsList[1]">ラーメン</option>
<option value="goodsList[2]">割り箸</option>
</select>
<select name="count">
<option value="" selected>数量</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<br>
<button id="button01" name="add" type="button"> add </button>
<br>
<br>
<text id="text01" class="textClass01">
売上伝票
</text>
<br>
<script type="text/javascript">
<!--
Register();
// -->
</script>
<br>
<table id="table01" class="tableClass01">
<tr>
<th>入力番号</th>
<th>品名</th>
<th>単価</th>
<th>数量</th>
<th>計</th>
</tr>
</table>
</form>
</body>
</html>
JavaScript
function Main(){
var addButton = document.getElementById("button01");
addButton.addEventListener("click", SalesData, false);
}
var Number = 1;
function Goods(){
var goodsList = [new Goods(1, "コーラ", 100), new Goods(2, "ラーメン", 290), new Goods(3, "割り箸", 200)];
}
function Register(){
var now = new Date();
document.write(now);
}
function SalesData(){
var targetTable = document.getElementById("table01");
var tableChilds = targetTable.childNodes;
var row = targetTable.insertRow(addNum);
var targetTbody = tableChilds[1];
var htmlString = "<tr><td>" + Number + "<td></td>" + Goods(goods[goodsNo]) + "<td></td>" + count + "<td></td>" + calc + "</td></tr>";
(targetTbody.childNodes)[addNum].outerHTML = htmlString;
Number++;
document.getElementById("dispArea01").innerHTML ="<p>" + targetTbody.childNodes.length + "</p>";
}
- 補足
- すみません、本文で書けなかった分を補足します。
特に問題なのが、ボタンを押したときの処理でボタン等のフォームはできたものの、選んだ商品についての情報と数量分の値段をテーブルへの表示ができないことです。
この部分について特にアドバイス頂けたらと思います。
-
- 質問日時：
- 2012/6/7 21:32:23
-
- 残り時間：
- 6日間
-
- 補足日時：
- 2012/6/8 20:41:41
-
- 回答数：
- 1
-
- お礼：
- 知恵コイン
- 25枚
-
- 閲覧数：
- 58
-
- ソーシャルブックマークへ投稿：
- Yahoo!ブックマークへ投稿
- はてなブックマークへ投稿
- （ソーシャルブックマークとは）
回答
（1件中1〜1件）
～補足を受けて～
前後状況がよくわからないため、とりあえず貴方のHTML+JavaScriptを踏襲しつつ、動くサンプルを作りました。HTMLと合わせると最大サイズを超えてしまうため、うちのサーバーにおいておきますので、参考にしてみてください。貴方の意図しているやり方と違うかもしれませんが...
http://www.spoonsoftware.com/~tabuchi/goodsselectsample.html
（解決済みになったら消します）
ちなみにさっきonclickがどうのこうのと書いてしまいましたが、ちゃんとMain関数でaddEventListenerしていたんですねぇ。失礼しました。
- 違反報告
- 編集日時：2012/6/9 00:25:50
- 回答日時：2012/6/8 15:32:30