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

解決済

質問者：kyoto2008
質問日時：2008/02/20 18:30
回答数：6件

初心者なのに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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (6件)

ベストアンサー優先
最新から表示
回答順に表示

No.5ベストアンサー

回答者： yambejp
回答日時：2008/02/21 13:14

こんな感じでやると、無駄に名前をつけたりするのに悩まないですむと

おもいますよ。

<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>

- 0
- 件

通報する

この回答へのお礼

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

通報する

お礼日時：2008/02/21 18:32

No.6

回答者： yambejp
回答日時：2008/02/21 18:32

>と書き換えたら、ちゃんと計算できたのですが変更すると

>何か不都合があるのでしょうか?
>IDとnameの違いも判ってなくて決まり文句的に使っているレベル

formにnameをつけるのは古いやり方です。
いまのルールではformにnameをつけることは非推奨とされています。

- 0
- 件

通報する

この回答へのお礼

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

通報する

お礼日時：2008/02/21 20:19

No.4

回答者： ranuwe
回答日時：2008/02/21 11:10

<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>

- 0
- 件

通報する

この回答へのお礼

再度お答えいただいてありがとうございます。
シンプルなscriptで流れが解りやすく
これなら初心者でもなんとか使いこなせそうです。
勉強になりました。
本当にありがとうございました。

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

通報する

お礼日時：2008/02/21 18:21

No.3

回答者： ai10
回答日時：2008/02/21 00:17

<朝食のカロリー計算の方法>は

食品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
という具合ではないですか？

これと同じことを昼食でも計算して

あとは全部足す、みたいな？
そんなんですか？
間違ってたらごめんなさい

この回答への補足

ほぼそうです。
例えば、
朝食。
　　= ご飯 = 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
といった感じです。
ご飯はご飯で朝食・昼食を合算して食品別で出してから、全体のカロリーを出したいと思っています。

質問には書いてませんが、食品別にも合算して蛋白質・炭水化物なども
合わせて計算する予定なので、そのような順番で計算できたらと
思っています。

たぶん、質問の作り方が解ればなんとか出来ると思いますし、
あまり量の多い質問は気が引けるので省略させていただきました。
説明不足で手間取らせてすいませんが、よろしくお願いします。

補足日時：2008/02/21 07:10

通報する

- 0
- 件

通報する

No.2

回答者： ranuwe
回答日時：2008/02/20 19:06

グラム数って計算に使うんじゃないんですか？

グラム数について何も触れられていませんけど。
わかる情報だけで考えてみました。

<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>

この回答への補足

再度、以下の補足も含めて訂正します。すいません。

【カロリー(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で設定しておく係数です。

朝食・昼食毎に、オプションの食品項目から選択したら、
右のテキストボックスでグラム数を入力。
それらを朝食・昼食まとめて食品毎に加算して、予め設定してある係数に掛け合わせて結果のカロリーを出す流れです。

もし、まだ説明不足でしたら申し訳ありませんが再度ご質問ください。
お手数をお掛けしますがよろしくお願いします。

補足日時：2008/02/20 19:34

通報する

- 0
- 件

通報する

No.1

回答者： yambejp
回答日時：2008/02/20 18:51

＞カロリー=(ご飯0.1)+(肉0.2)+(魚0.3)+(牛乳0.4)

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

この回答への補足

説明不足ですいません。
(ご飯*0.1)+(肉*0.2)+(魚*0.3)+(牛乳*0.4)は
正確には(ご飯のグラム*0.1)+(肉のグラム*0.2)+(魚のグラム*0.3)+(牛乳のグラム*0.4)でした。
そのグラムがテキストボックスの入力する数値です。

隣の*0.1、*0.2はその項目の食品のグラム当りのカロリーで
こちらで予めscriptで設定しておく係数です。

補足日時：2008/02/20 19:24

通報する