いつもお世話になっています。 タイトルの通り、innnerHTMLを使って自動生成された表を 指定されたDIVに表示させたいと考えています。 自分が形にしたい動作は 1.ラジオボタンを選択し、ボタンを押す 2.priceCalc関数内でラジオボタンのvalue値を取得 3.選択したボタンによって、料金の再計算を行う といった流れです。 現在はラジオボタンに応じたvalue値の取得はできている状態ですが、 表にvalue値が反映していないため、それぞれ単独で動いてしまっています。 再計算ボタンを押したときにボタンと表が連動し、 value値ではなく、表そのものをpriceTableOutputに出力させる作りにするためには どのように手直ししたら良いでしょうか？ 皆さんの知恵をお借りしたいです。 よろしくお願いします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>innnerHTMLで自動生成された表を出力したい</title> <script type="text/javascript"> //ラジオボタンのvalue値を取得 var daysRate = 1; var nouki = document.getElementsByName("nouki"); function priceCalc(){ for(i=0; i<nouki.length; i++){ if(nouki[i].checked){ daysRate = nouki[i].value; } } document.getElementById("priceTableOutput").innerHTML = daysRate; } </script> </head> <body> 再計算ボタンを押すと価格表が再計算されます。<br /> <input type="radio" name="nouki" value="1" checked="checked">通常配達 <input type="radio" name="nouki" value="1.25">翌日配達 <input type="radio" name="nouki" value="1.5">当日配達 <input type="button" value="再計算" onClick="priceCalc()"> <div id="priceTableOutput" style="background:#ccc;">innerHTMLで、ここに表を出力</div> <br /> <script> var price = new Array(100,300,500); var table_start = "<table border='1'><tbody><tr>"; var table_end = "</tr></tbody></table>" document.write(table_start); for(var i=0; i<=2; i++){ document.write("<td width='50'>" + parseInt(price[i]) * parseFloat(daysRate) + "</td>"); } document.write(table_end); </script> </body> </html>
↧