初心者なのに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>
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>
教えていただいてありがとうございます。
scriptは高度で私には本を片手に解読しないと
意味を理解出来なさそうですが、これなら食品項目が多くても
楽そうで助かります。
色々なやり方があるんですね、勉強になりました。
本当にありがとうございました。
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>
再度お答えいただいてありがとうございます。
シンプルなscriptで流れが解りやすく
これなら初心者でもなんとか使いこなせそうです。
勉強になりました。
本当にありがとうございました。
あと最後に一つだけお聞きしたいのですが、今回教えていただいた
のではform name="f1"ですが、今作りかけのがform id="f1"
でしているのでNO.2の回答を参考にして、
Fm = document.getElementById("f1");
with(Fm){
と書き換えたら、ちゃんと計算できたのですが変更すると
何か不都合があるのでしょうか?
IDとnameの違いも判ってなくて決まり文句的に使っているレベル
なので、極めて初歩的な質問かもしれませんが・・・。
すでに十分教えてもらっていますので、初歩すぎる質問だったらスルーして貰っても構いません。
No.3
- 回答日時:
<朝食のカロリー計算の方法>は
食品1で肉(123g)、
食品2で牛乳(456g) ←チョー適当w
としたら
朝食のカロリー
= ( ご飯のグラム数 * 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
といった感じです。
ご飯はご飯で朝食・昼食を合算して食品別で出してから、全体のカロリーを出したいと思っています。
質問には書いてませんが、食品別にも合算して蛋白質・炭水化物なども
合わせて計算する予定なので、そのような順番で計算できたらと
思っています。
たぶん、質問の作り方が解ればなんとか出来ると思いますし、
あまり量の多い質問は気が引けるので省略させていただきました。
説明不足で手間取らせてすいませんが、よろしくお願いします。
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>
この回答への補足
再度、以下の補足も含めて訂正します。すいません。
【カロリー(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で設定しておく係数です。
朝食・昼食毎に、オプションの食品項目から選択したら、
右のテキストボックスでグラム数を入力。
それらを朝食・昼食まとめて食品毎に加算して、予め設定してある係数に掛け合わせて結果のカロリーを出す流れです。
もし、まだ説明不足でしたら申し訳ありませんが再度ご質問ください。
お手数をお掛けしますがよろしくお願いします。
No.1
- 回答日時:
>カロリー=(ご飯*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で設定しておく係数です。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 以前の質問だと、どの条件でも配列が表示されてしまいます。 1 2022/07/09 11:40
- JavaScript セレクトボックスを2つ選択してメッセージなどを表示するには。~運賃検索プログラムを完成させたい~ 1 2022/07/22 11:10
- JavaScript セレクトボックスを2つ設けて選択して初めてメッセを表示 1 2022/07/27 12:15
- JavaScript セレクトボックスで配列を呼び出したい。 1 2022/07/08 20:14
- JavaScript console.logがどうしても2つ機能しないのでアドバイスをくださいお願いします 2 2022/07/07 22:13
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- JavaScript JavascriptからSQLへ繋ぎ方が分からない 3 2022/07/07 00:27
- JavaScript セレクトを全て選択されていないと、文字によるエラーメッセージを表示させるコードを調べています 2 2023/06/22 15:48
- JavaScript 中百舌鳥駅と深井駅を入れ替えて選択しても同じ挙動にしたいです。 2 2022/06/24 18:45
- JavaScript 2段階プルダウンで1段階目の選択を終えた後に選択ボックスを見えなくしたい 2 2022/07/05 21:58
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
selectを変更不可にしたい
-
selectを使った計算
-
ラジオボタンとプルダウンを連...
-
JavaScriptの質問です。どなた...
-
セレクトボックスの内容を次の...
-
Selectボックスの一覧表示方法
-
3つのselectでURLパラメータを...
-
javascriptで計算フォームを作...
-
プルダウンメニューに連動する...
-
jqueryでセレクトメニュー+スク...
-
javascriptでセレクトボックス...
-
複数条件の入力チェックについて
-
disableとすることなく、ユーザ...
-
正規表現で複数マッチ条件で悩...
-
ボタン2回押しを無効にしたい
-
<form action="#">の意味とは?
-
<td>の中のonClick="location" で
-
JavaScriptにて動的に配列を作...
-
背景色を変えて未入力チェック...
-
【jsp/Java】チェックボックス...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
全てのselect要素をデフォルト...
-
javascriptでセレクトボックス...
-
Selectボックスの一覧表示方法
-
JavaScriptで<select>の<option...
-
プルダウン選択を変更すると、...
-
select要素のvalueを配列で取得...
-
selectを変更不可にしたい
-
<input>の選択肢をプルダウンメ...
-
ラジオボタンとプルダウンを連...
-
【JS】selectでchangeした時の...
-
VBScriptでHTMLのセレクトボッ...
-
リストボックス内の重複したも...
-
同じ名前のセレクトがある場合...
-
プルダウンの値によって活性・...
-
selectが変更されたらnameを指...
-
【javascript】連想配列からセ...
-
3つのselectでURLパラメータを...
-
複数のプルダウンを1つにまとめ...
-
selectボックスで選択数を制限...
-
セレクトボックスで配列を呼び...
おすすめ情報