- 締切済み
for文についてご教授ください
javascriptを学習しています。初級者のためご教授のほどお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <script> function kazu(){ var fObj = document.itemlist; var price1 = fObj.item1.options[fObj.item1.selectedIndex].value; var price2 = fObj.item2.options[fObj.item2.selectedIndex].value; var total = parseFloat(price1) + parseFloat(price2); document.getElementById("total").value = total; } </script> </head> <body> <header> <form action="#" name="itemlist" > <table> <tr> <td> <select name="item1" onchange="kazu()"> <option value="100">itemA-1</option> <option value="200">itemA-2</option> </select> </td> </tr> <td> <select name="item2" onchange="kazu()"> <option value="1000">itemB-1</option> <option value="2000">itemB-2</option> </select> </td> </tr> <tr> <td name="total"> <input type="text" value="" id="total" /> </td> </tr> </table> </form> </body> </html> 上記の内容をfor文を使い動作するようにと思っています。 自分で以下の内容を考えたのですがが動作しません。 以下の内容の問題点を教えいただければと思います。なにとぞよろしくお願いいたします。 function kazu(){ var fObj = document.itemlist; var len = document.itemlist.length; for(i=1;i<=len;i++){ var price[i] = fObj.item[i].options[fObj.item[i].selectedIndex].value; } var total = parseFloat(price1) + parseFloat(price2); document.getElementById("total").value = total; }
- 5467kaou
- お礼率80% (4/5)
- JavaScript
- 回答数2
- ありがとう数5
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- babu_baboo
- ベストアンサー率51% (268/525)
> 以下の内容の問題点 select が multiple だったら？ <head> の中に肝心の <titele>xxx</title> が無いよ！ <meta charset="utf-8">みたいな文字コード指定が無いよ！ <header>が閉じてないよ！ <tr>が足りないよ！ ie は、どうか知らないけど、FXは、onchangeイベントをform要素で拾えるよ！ function kazu (){ document.getElementById("total").value = Array.prototype.reduce.call ( document.forms["itemlist"].querySelectorAll ('select[name^="item"] option'), function add (a, o) { return o.selected ? parseFloat (o.value) + a: a;}, 0); }
- fujillin
- ベストアンサー率61% (1594/2576)
一例です。 function kazu(){ var elems = document.forms["itemlist"].elements; var len = elems.length; var i, e, total = 0; for(i = 0; e = elems[i++];) if(e.nodeName=="SELECT") total += parseFloat(e.value); elems["total"].value = total; }
お礼
すぐご回答いただきありがとうございます。 参考にさせていただき、学習に役立てたいと思います。
お礼
記載ミスのご指摘ありがとうございました。 以後気を付けたいと思います。 回答ありがとうございます。 参考にさせていただき、学習に役立てたいと思います。