プロが教えるわが家の防犯対策術！

JavaScriptのラジオボタンについてご質問させていただきます。

締切済

  • 質問者：mizuto3210
  • 質問日時：
  • 回答数：2件

JavaScriptのラジオボタンについてご質問させていただきます。
ラジオボタンに選択したメニューの合計カロリーを表示するというシステムを作っているのですが、私は初心者なため、行き詰まってしまいました。。

簡単なシステムで、ハンバーガー、サイドメニュー、ドリンクと３つの項目にそれぞれ２つ選択肢があって、最後に計算ボタンを押すと選んだメニューの合計カロリーが出るというものです。

私が作ったコードが以下になります。


<html>
<head>
<title>マックでカロリー</title>
<script language="javascript">
a =document.formA.hamburger.value;
b =document.formB.sidemenu.value;
c =document.formC.drink.value;
function calccalorie(){
calorie = "a + b + c";
return eval(calorie);
}

function writecalorie(){
document.write("あなたのマックでの摂取カロリーは" + calccalorie() + "kcalです！<br /><br />");
document.write("ちなみに、一日に必要なエネルギー量の目安は、20代男性で2650kcal、20代女性で2050kcalです。");
}
</script>
</head>
<body>
<fieldset>
<p>
<h2>ハンバーガー</h2><br />
<img src="hamburger.jpg" />　　
<img src="bigmac.jpg" /><br />
<form name="formA">
<input type="radio" name="hamburger" value="274" />
ハンバーガー　　　　
<input type="radio" name="hamburger" value="555" />
ビッグマック
</form>
</p>
</fieldset>
<fieldset>
<p>
<h2>サイドメニュー</h2>
　<img src="frenchfries.jpg" />　　　　　
<img src="shakashakachicken.jpg" /><br />
<form name="formB">
<input type="radio" name="sidemenu" value="454" />
マックフライポテト（M）
<input type="radio" name="sidemenu" value="187" />
シャカシャカチキン
</form>
</p>

</fieldset>
<fieldset>
<p>
<h2>ドリンク</h2>
<img src="cocacola.jpg" />　
<img src="mcshake.jpg" /><br />
<form name="formC">
<input type="radio" name="drink" value="140" />
コカコーラ（M）
<input type="radio" name="drink" value="321" />
マックシェイクバニラ（M）
</form>
</p>
</fieldset>

<form>
<input type="button" name="btn1" value="何カロリー？"
onClick="writecalorie()" />
</form>
</body>
</html>


JavaScriptを勉強し始めて1週間ほどなので、すごく見当違いなことをしているかもわかりません＾＾；
何かアドバイス（参考ホームページでも）いただければ幸いです。
よろしくお願いいたします。

通報する

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

質問の本文を隠す

A 回答 (2件)

No.2

  • 回答者： babu_baboo
  • 回答日時：

ななめより、もうちょっとまっすぐみました。


ぜんかくくうはくは、すべてはんかくにしてね。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>マックでカロリー</title>

<style type="text/css"><!--
　fieldset { margin:1em }
　fieldset div { float: left; width:200px; }
　fieldset div img { display: block; }
　#c { color:red; font-size: x-large;}
　#d { display:none; }
-->
</style>

<body>

<form id="hoge" action="#">
　<fieldset>
　　<legend>ハンバーガー</legend>
　　<div>
　　　<img src="hamburger.jpg" alt="ハンバーガー">
　　　<input type="radio" name="hamburger" value="274" checked>
　　　ハンバーガー
　　</div>
　　<div>
　　　<img src="bigmac.jpg" alt="ビッグマック">
　　　<input type="radio" name="hamburger" value="555">
　　　ビッグマック
　　</div>
　</fieldset>

　<fieldset>
　　<legend>サイドメニュー</legend>
　　<div>
　　　<img src="frenchfries.jpg" alt=" マックフライポテト（M）">
　　　<input type="radio" name="sidemenu" value="454" checked>
　　　マックフライポテト（M）
　　</div>
　　<div>
　　　<img src="shakashakachicken.jpg" alt="シャカシャカチキン">
　　　<input type="radio" name="sidemenu" value="187">
　　　シャカシャカチキン
　　</div>
　</fieldset>

　<fieldset>
　　<legend>ドリンク</legend>
　　<div>
　　　<img src="cocacola.jpg" alt="コカコーラ（M）">
　　　<input type="radio" name="drink" value="140" checked>
　　　コカコーラ（M）
　　</div>
　　<div>
　　　<img src="mcshake.jpg" alt="マックシェイクバニラ（M）">
　　　<input type="radio" name="drink" value="321">
　　　マックシェイクバニラ（M）
　　</div>
　</fieldset>
　
　<p>
　　<input type="button" name="btn1" value="何カロリー？" onClick="writecalorie()">
　</p>
　
　<p id="d">
　　あなたのマックでの摂取カロリーは、<span id="c"></span>kcalです！<br>
　　ちなみに、一日に必要なエネルギー量の目安は、20代男性で2650kcal、20代女性で2050kcalです。
　</p>
　
</form>


<script type="text/javascript"><!--

function writecalorie () {
　var ns = document.getElementById ('hoge').elements;
　var i = 0, n;
　var total = 0;
　
　while (n = ns[i++])
　　if ('radio' == n.type && n.checked)
　　　total += Number( n.value );
　
　document.getElementById ('c').firstChild.nodeValue = total + '';

　with (document.getElementById('d')) {
　　style.display = 'block';
　　setTimeout (function (){ style.display = 'none'; }, 2000);
　}
}
//-->
</script>
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： fujillin
  • 回答日時：

斜めに見ただけですが…




まずはスクリプトの前に、以下などでHTMLの構成をチェックしてみましょう。
　http://htmllint.itc.keio.ac.jp/htmllint/htmllint …
いろいろあるはずですので、（全部の必要はありませんが）ある程度まではクリアできてから、スクリプトの修正にかかったほうがよろしいかと…

formを4箇所使っていますが、全体で1箇所のformで充分では？（あるいはformなしとか）
fieldsetも本来はform内で使用するべきものでは？

スクリプトの前に…
・ハンバーガーを2個食べたらどうするのだろうか？（そんなのは受け付けない？）
　あるいはハンバーガーとビッグマックを食べたときはどうする？
・サイドメニューを食べなかったときには計算はどうなるのだろうか？

スクリプトに関して
・ご提示のソースではa,b,cの値をHTML読込み時に取得しようとしています。
　（この段階では、要素もまだないし、値ももちろんない。）
　ボタンクリック後に値を取得するつもりでは？
・document.formA.hamburgerでは要素を特定できない（2個以上ある）ので、
　その値を取得はできません。
　また、チェックされているボタンの値を取得するようにしなければなら
　ないのでは？
・要素の指定は、少々面倒ですが
　document.forms["formA"].elements["hamburger"]のような方法が確実です。
　（あるいはdocument.getElementById()を利用するなど）
　ただし、この場合は複数あるので（↑）と同じで配列で返されますから、
　扱いに注意。
・writecalorie()内でdocument.writeを使用していますが、HTML表示後の
　document.writeは全体を再記述する（あるいは無視されるなど）になります。
　一旦DOMが構築された後では、新しい要素を生成するか既存の要素に表示
　内容を変更するなどの方法を取らないとまずそう。
　（何度かボタンを押した場合を想像してみてください）
・入力値や○○.valueは基本的に文字列となっている可能性があります。
　そのまま計算すると文字列演算になる場合がありますのでご注意。

以上、とりあえず気付いた主な点です。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご丁寧な解答、ありがとうございました。
現時点では自分にはこのプログラムはレベルが高いようです＾＾；
たくさんご指摘いただいたので、これから勉強していこうと思います。

通報する
お礼日時：2010/07/06 21:08

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報