ベストアンサー

セレクトボックスの項目ごとにテキストボックスの数値を参照するには??

2008/02/20 18:30

初心者なのにjavascriptで作ろうとしているのが悪いのですが、完全に煮詰まっています。助けてください。カロリー計算なんですが、朝食・昼食など食事毎にセレクトボックスの食品項目を選択していきます。 (食品項目は、本来は数十項目あります) 次に選択された項目のグラムをテキストボックスで入力します。そして、それを食品毎にカロリー計算して合計のカロリーを表示します。 answer=(A*0.1)+(B*0.2)+(C*0.3)+(D*0.4) が、カロリー=(ご飯*0.1)+(肉*0.2)+(魚*0.3)+(牛乳*0.4)といった感じです。セレクトボックスのオプション項目の食品は、朝食・昼食問わず、同一です。食品1・2は選択されない場合もあります。もっと簡単に作れる入力書式などの変更も考えましたが、諸事情により、この方式の入力・結果表示が必要なんです。なにぶんボランティアサークルで予算も何もなくHP作成を外部に依頼するのも不可能です。少し出来る人が作っている程度です。他に頼る人もいないので、出来なければ諦めざるえない状況なんで今、本を読みながら独学で作っています。どうかお助けください。厚かましいですが、よろしくお願いします。 <HEAD> <SCRIPT language="JavaScript"> function calc(){ var A = var B = var C = var D = var E = document.f1.answer.innerText = (A*0.1)+(B*0.2)+(C*0.3)+(D*0.4); } window.onload=calc; </SCRIPT> </HEAD> <BODY> <form id="f1"> 計算結果の計算式<BR> 【カロリー(answer)=(A*0.1)+(B*0.2)+(C*0.3)+(D*0.4)】<BR> カロリー<INPUT size="20" type="text" name="answer"><BR> <BR> 朝食<BR> 食品1<SELECT name="s11"> <OPTION value="0" selected>選択項目</OPTION> <OPTION value="1">ご飯</OPTION> <OPTION value="2">肉</OPTION> <OPTION value="3">魚</OPTION> <OPTION value="4">野菜</OPTION> <OPTION value="5">牛乳</OPTION> </SELECT>　左で選択した項目のグラム<INPUT size="10" type="text" value="0" onchange="calc()" ><BR> 食品2<SELECT name="s12"> <OPTION value="0" selected>選択項目</OPTION> <OPTION value="1">ご飯</OPTION> <OPTION value="2">肉</OPTION> <OPTION value="3">魚</OPTION> <OPTION value="4">野菜</OPTION> <OPTION value="5">牛乳</OPTION> </SELECT>　左で選択した項目のグラム<INPUT size="10" type="text" value="0" onchange="calc()" ><BR> <BR> 昼食<BR> 食品1<SELECT name="s21"> <OPTION value="0" selected>選択項目</OPTION> <OPTION value="1">ご飯</OPTION> <OPTION value="2">肉</OPTION> <OPTION value="3">魚</OPTION> <OPTION value="4">野菜</OPTION> <OPTION value="5">牛乳</OPTION> </SELECT>　左で選択した項目のグラム<INPUT size="10" type="text" value="0" onchange="calc()" ><BR> 食品2<SELECT name="s22"> <OPTION value="0" selected>選択項目</OPTION> <OPTION value="1">ご飯</OPTION> <OPTION value="2">肉</OPTION> <OPTION value="3">魚</OPTION> <OPTION value="4">野菜</OPTION> <OPTION value="5">牛乳</OPTION> </SELECT>　左で選択した項目のグラム<INPUT size="10" type="text" value="0" onchange="calc()" ><BR> 　</FORM> </BODY>

kyoto2008
お礼率73% (11/15)

JavaScript
回答数6
ありがとう数4

みんなの回答 （6）
専門家の回答

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

ベストアンサー

yambejp
ベストアンサー率51% (3827/7415)

2008/02/21 13:14 回答No.5

こんな感じでやると、無駄に名前をつけたりするのに悩まないですむとおもいますよ。 <html> <head> <script type="text/javascript"> function calc(){ var f=document.getElementById('f1'); var calorie={"ご飯":0.1,"肉":0.2,"魚":0.3,"野菜":0.4,"牛乳":0.5}; var divs=f.getElementsByTagName('div'); var sum=0; for(var i=0;i<divs.length;i++){ var thiscalorie=0; var thisquantity=0; var cn=divs[i].firstChild; while(cn){ if(cn.nodeName=="SELECT" && cn.className=="item" && cn.value!="") thiscalorie=calorie[cn.value]; if(cn.nodeName=="INPUT" && cn.className=="quantity") thisquantity=cn.value; cn=cn.nextSibling; } sum+=thiscalorie*thisquantity; } f.answer.value=sum; } window.onload=function(){ var f=document.getElementById('f1'); for(var i=0;i<f.length;i++){ if(f[i].className=="item"||f[i].className=="quantity"){ f[i].onchange=function(){calc()}; } } calc(); } </script> </head> <body> <form id="f1"> <div>計算結果の計算式<br> 【カロリー(answer)=(a*0.1)+(b*0.2)+(c*0.3)+(d*0.4)】<br> カロリー<input size="20" type="text" name="answer"><br> <br> </div> <div>朝食</div> <div>食品1 <select class="item"> <option value="" selected>選択項目</option> <option value="ご飯">ご飯</option> <option value="肉">肉</option> <option value="魚">魚</option> <option value="野菜">野菜</option> <option value="牛乳">牛乳</option> </select> 　左で選択した項目のグラム<input size="10" type="text" value="0" class="quantity"><br> </div> <div> 食品2 <select class="item"> <option value="" selected>選択項目</option> <option value="ご飯">ご飯</option> <option value="肉">肉</option> <option value="魚">魚</option> <option value="野菜">野菜</option> <option value="牛乳">牛乳</option> </select> 　左で選択した項目のグラム<input size="10" type="text" value="0" class="quantity"><br> <br> </div> <div>昼食</div> <div> 食品1 <select class="item"> <option value="" selected>選択項目</option> <option value="ご飯">ご飯</option> <option value="肉">肉</option> <option value="魚">魚</option> <option value="野菜">野菜</option> <option value="牛乳">牛乳</option> </select> 　左で選択した項目のグラム<input size="10" type="text" value="0" class="quantity"><br> </div> <div> 食品2 <select class="item"> <option value="" selected>選択項目</option> <option value="ご飯">ご飯</option> <option value="肉">肉</option> <option value="魚">魚</option> <option value="野菜">野菜</option> <option value="牛乳">牛乳</option> </select> 　左で選択した項目のグラム<input size="10" type="text" value="0" class="quantity"><br> </div> </form> </body> </html>

質問者

お礼 2008/02/21 18:32

教えていただいてありがとうございます。 scriptは高度で私には本を片手に解読しないと意味を理解出来なさそうですが、これなら食品項目が多くても楽そうで助かります。色々なやり方があるんですね、勉強になりました。本当にありがとうございました。

その他の回答 (5)

yambejp
ベストアンサー率51% (3827/7415)

2008/02/21 18:32 回答No.6

>と書き換えたら、ちゃんと計算できたのですが変更すると >何か不都合があるのでしょうか? >IDとnameの違いも判ってなくて決まり文句的に使っているレベル formにnameをつけるのは古いやり方です。いまのルールではformにnameをつけることは非推奨とされています。

質問者

お礼 2008/02/21 20:19

そうなんですか。本やサイトによって使い方が別れてたのでどう違うのか疑問に思っていました。ありがとうございました。

ranuwe
ベストアンサー率33% (7/21)

2008/02/21 11:10 回答No.4

<html> <head> <script type="text/javascript"> function calc(){ with(document.f1){ sumA = new Number(0); sumB = new Number(0); sumC = new Number(0); sumD = new Number(0); sums = new Array(0,0,0,0,0); for(i=1;i<=5;i++){ gramA = s11[s11.selectedIndex].value == i ? parseInt(gs11.value,10) : 0; gramB = s12[s12.selectedIndex].value == i ? parseInt(gs12.value,10) : 0; gramC = s21[s21.selectedIndex].value == i ? parseInt(gs21.value,10) : 0; gramD = s22[s22.selectedIndex].value == i ? parseInt(gs22.value,10) : 0; sums[i] = gramA + gramB + gramC + gramD; } answer.value = (sums[1] * 1 /10) + (sums[2] * 2 /10) + (sums[3] * 3 / 10) + (sums[5] * 4 / 10); } } window.onload=calc; </script> </head> <body> <form name="f1"> 計算結果の計算式<br> 【カロリー(answer)=(a*0.1)+(b*0.2)+(c*0.3)+(d*0.4)】<br> カロリー<input size="20" type="text" name="answer"><br> <br> 朝食<br> 食品1 <select name="s11" onchange="calc()"> <option value="0" selected>選択項目</option> <option value="1">ご飯</option> <option value="2">肉</option> <option value="3">魚</option> <option value="4">野菜</option> <option value="5">牛乳</option> </select> 　左で選択した項目のグラム<input size="10" type="text" value="0" name="gs11" onchange="calc()"><br> 食品2 <select name="s12" onchange="calc()"> <option value="0" selected>選択項目</option> <option value="1">ご飯</option> <option value="2">肉</option> <option value="3">魚</option> <option value="4">野菜</option> <option value="5">牛乳</option> </select> 　左で選択した項目のグラム<input size="10" type="text" value="0" name="gs12" onchange="calc()" ><br> <br> 昼食<br> 食品1 <select name="s21" onchange="calc()"> <option value="0" selected>選択項目</option> <option value="1">ご飯</option> <option value="2">肉</option> <option value="3">魚</option> <option value="4">野菜</option> <option value="5">牛乳</option> </select> 　左で選択した項目のグラム<input size="10" type="text" value="0" name="gs21" onchange="calc()" ><br> 食品2 <select name="s22" onchange="calc()"> <option value="0" selected>選択項目</option> <option value="1">ご飯</option> <option value="2">肉</option> <option value="3">魚</option> <option value="4">野菜</option> <option value="5">牛乳</option> </select> 　左で選択した項目のグラム<input size="10" type="text" value="0" name="gs22" onchange="calc()" ><br> </form> </body> </html>

質問者

お礼 2008/02/21 18:21

再度お答えいただいてありがとうございます。シンプルなscriptで流れが解りやすくこれなら初心者でもなんとか使いこなせそうです。勉強になりました。本当にありがとうございました。あと最後に一つだけお聞きしたいのですが、今回教えていただいたのではform name="f1"ですが、今作りかけのがform id="f1" でしているのでNO.2の回答を参考にして、 Fm = document.getElementById("f1"); with(Fm){ と書き換えたら、ちゃんと計算できたのですが変更すると何か不都合があるのでしょうか? IDとnameの違いも判ってなくて決まり文句的に使っているレベルなので、極めて初歩的な質問かもしれませんが・・・。すでに十分教えてもらっていますので、初歩すぎる質問だったらスルーして貰っても構いません。

ai10
ベストアンサー率27% (3/11)

2008/02/21 00:17 回答No.3

<朝食のカロリー計算の方法>は食品1で肉(123g)、食品2で牛乳(456g) ←チョー適当ｗとしたら朝食のカロリー　　= ( ご飯のグラム数 * 0.1 ) 　　+ ( 肉のグラム数 * 0.2 ) 　　+ ( 魚のグラム数 * 0.3 ) 　　+ ( 牛乳のグラム数 * 0.4 ) の式に、それぞれご飯のグラム数 = 0 肉のグラム数 = 123 魚のグラム数 = 0 牛乳のグラム数 = 456 を代入し朝食のカロリー = ( 0 * 0.1 ) + ( 123 * 0.2 ) + ( 0 * 0.3 ) + ( 456 * 0.4 ) 　　　　　　　 = 24.6 + 182.4 　　　　　　　 = 207 という具合ではないですか？これと同じことを昼食でも計算してあとは全部足す、みたいな？そんなんですか？間違ってたらごめんなさい

質問者

補足 2008/02/21 07:10

ほぼそうです。例えば、朝食。　　= ご飯 = 200グラム　　+ 肉 = 　0グラム　　+ 魚 = 0グラム　　+ 牛乳 = 0グラム昼食。　　= ご飯 = 200グラム　　+ 肉 = 200グラム　　+ 魚 = 0グラム　　+ 牛乳 = 0グラムなら、それぞれの食品毎にまとめてから、係数を掛けて朝食・昼食の合計カロリーでカロリー= ( (ご飯)400 * 0.1 ) + ( (肉)200 * 0.2 ) + ( 0 * 0.3 ) 　　　　　+ ( 0 * 0.4 ) 　　　　= (40)+(40)+(0)+(0) 　　 = 80 といった感じです。ご飯はご飯で朝食・昼食を合算して食品別で出してから、全体のカロリーを出したいと思っています。質問には書いてませんが、食品別にも合算して蛋白質・炭水化物なども合わせて計算する予定なので、そのような順番で計算できたらと思っています。たぶん、質問の作り方が解ればなんとか出来ると思いますし、あまり量の多い質問は気が引けるので省略させていただきました。説明不足で手間取らせてすいませんが、よろしくお願いします。

ranuwe
ベストアンサー率33% (7/21)

2008/02/20 19:06 回答No.2

グラム数って計算に使うんじゃないんですか？グラム数について何も触れられていませんけど。わかる情報だけで考えてみました。 <html> <head> <script type="text/javascript"> function calc(){ Fm = document.getElementById("f1"); with(Fm){ var A = s11[s11.selectedIndex].value; var B = s12[s12.selectedIndex].value; var C = s21[s21.selectedIndex].value; var D = s22[s22.selectedIndex].value; answer.value = (A * 1 /10) + (B * 2 /10) + (C * 3 / 10) + (D * 4 / 10); } } window.onload=calc; </script> </head> <body> <form id="f1"> 計算結果の計算式<BR> 【カロリー(answer)=(A*0.1)+(B*0.2)+(C*0.3)+(D*0.4)】<BR> カロリー<INPUT size="20" type="text" name="answer"><BR> <BR> 朝食<BR> 食品1<SELECT name="s11" onchange="calc()"> <OPTION value="0" selected>選択項目</OPTION> <OPTION value="1">ご飯</OPTION> <OPTION value="2">肉</OPTION> <OPTION value="3">魚</OPTION> <OPTION value="4">野菜</OPTION> <OPTION value="5">牛乳</OPTION> </SELECT>　左で選択した項目のグラム<INPUT size="10" type="text" value="0" onchange="calc()"><BR> 食品2<SELECT name="s12" onchange="calc()"> <OPTION value="0" selected>選択項目</OPTION> <OPTION value="1">ご飯</OPTION> <OPTION value="2">肉</OPTION> <OPTION value="3">魚</OPTION> <OPTION value="4">野菜</OPTION> <OPTION value="5">牛乳</OPTION> </SELECT>　左で選択した項目のグラム<INPUT size="10" type="text" value="0" onchange="calc()" ><BR> <BR> 昼食<BR> 食品1<SELECT name="s21" onchange="calc()"> <OPTION value="0" selected>選択項目</OPTION> <OPTION value="1">ご飯</OPTION> <OPTION value="2">肉</OPTION> <OPTION value="3">魚</OPTION> <OPTION value="4">野菜</OPTION> <OPTION value="5">牛乳</OPTION> </SELECT>　左で選択した項目のグラム<INPUT size="10" type="text" value="0" onchange="calc()" ><BR> 食品2<SELECT name="s22" onchange="calc()"> <OPTION value="0" selected>選択項目</OPTION> <OPTION value="1">ご飯</OPTION> <OPTION value="2">肉</OPTION> <OPTION value="3">魚</OPTION> <OPTION value="4">野菜</OPTION> <OPTION value="5">牛乳</OPTION> </SELECT>　左で選択した項目のグラム<INPUT size="10" type="text" value="0" onchange="calc()" ><BR> </form> </body> </html>

質問者

補足 2008/02/20 19:34

再度、以下の補足も含めて訂正します。すいません。【カロリー(answer)=(A*0.1)+(B*0.2)+(C*0.3)+(D*0.4)】 document.f1.answer.innerText = (A*0.1)+(B*0.2)+(C*0.3)+(D*0.4); は消し忘れてアップしてしまいました。忘れてください。 (ご飯*0.1)+(肉*0.2)+(魚*0.3)+(牛乳*0.4)は正確には(ご飯のグラム*0.1)+(肉のグラム*0.2)+(魚のグラム*0.3)+(牛乳のグラム*0.4)でした。そのグラムがテキストボックスの入力する数値です。隣の*0.1、*0.2はその項目の食品のグラム当りのカロリーでこちらで予めscriptで設定しておく係数です。朝食・昼食毎に、オプションの食品項目から選択したら、右のテキストボックスでグラム数を入力。それらを朝食・昼食まとめて食品毎に加算して、予め設定してある係数に掛け合わせて結果のカロリーを出す流れです。もし、まだ説明不足でしたら申し訳ありませんが再度ご質問ください。お手数をお掛けしますがよろしくお願いします。

yambejp
ベストアンサー率51% (3827/7415)

2008/02/20 18:51 回答No.1

＞カロリー=(ご飯*0.1)+(肉*0.2)+(魚*0.3)+(牛乳*0.4) ん～・・・いまいち意味がわからないのですが (ご飯*0.1)というのはご飯のカロリーが「0.1」で、ご飯の量が「ご飯」なのでしょうか？それはセレクトボックスとどうつながっているのでしょうか？仕様さえハッキリしてもらえばいけそうな気がしますが・・・。

質問者

補足 2008/02/20 19:24

説明不足ですいません。 (ご飯*0.1)+(肉*0.2)+(魚*0.3)+(牛乳*0.4)は正確には(ご飯のグラム*0.1)+(肉のグラム*0.2)+(魚のグラム*0.3)+(牛乳のグラム*0.4)でした。そのグラムがテキストボックスの入力する数値です。隣の*0.1、*0.2はその項目の食品のグラム当りのカロリーでこちらで予めscriptで設定しておく係数です。