• 締切済み

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

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

みんなの回答

回答No.2

ななめより、もうちょっとまっすぐみました。 ぜんかくくうはくは、すべてはんかくにしてね。 <!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">&nbsp;</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>

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

斜めに見ただけですが… まずはスクリプトの前に、以下などでHTMLの構成をチェックしてみましょう。 　http://htmllint.itc.keio.ac.jp/htmllint/htmllint.html いろいろあるはずですので、（全部の必要はありませんが）ある程度まではクリアできてから、スクリプトの修正にかかったほうがよろしいかと… 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は基本的に文字列となっている可能性があります。 　そのまま計算すると文字列演算になる場合がありますのでご注意。 以上、とりあえず気付いた主な点です。

mizuto3210
質問者

お礼

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

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • ラジオボタンでうまくするには・・・・

    初めまして。 現在下記のプルダウン形式で、一つの価格が同じなので問題なく動くのですが <FORM action="cart/sys/cart.cgi" method="post"> <INPUT type=hidden value=005 name=num> <INPUT type=hidden value=●●● name=name> <INPUT type=hidden value=2000 name=tan> <SELECT name=sur> <OPTION value="" selected>購入数量</OPTION> <OPTION value=1>１</OPTION> <OPTION value=2>２</OPTION> <OPTION value=3>３</OPTION> <OPTION value=4>４</OPTION> <OPTION value=5>５</SELECT> <INPUT type=submit value=カートに入れる> </FORM><BR> <FORM action="・・・/cart.cgi" method="post"> <INPUT type=hidden value=005 name=num> <INPUT type=hidden value=●●● name=name> <INPUT type=hidden value=2000 name=tan> </FORM> 同じ商品で１・２・３・４・５のそれぞれに単価が変わる設定をしたいのですが、うまくいく方法が見つからないです。 ラジオボタン形式で作ってみたものの・・・・ <FORM action="・・・/cart.cgi" method="post"> <INPUT type=hidden value=005 name=num> <INPUT type=hidden value=●●● name=name> <INPUT type=submit value=カートに入れる> </FORM> <FORM> <INPUT type="radio" name="name1" value="2000">１袋<BR> <INPUT type="radio" name="name1" value="3900">２袋<BR> <INPUT type="radio" name="name1" value="5800">３袋<BR> <INPUT type="radio" name="name1" value="7500">４袋<BR> <INPUT type="radio" name="name1" value="8500">５袋</FORM> としてみましたがうまくいきません。 なにか方法ございましたら、ご教授いただければと思います。

    • ベストアンサー
    • HTML
  • ラジオボタンについて教えてください！

    <input type="radio" name="xxxxx" value="xxxxx"><img src="xxxxx">とした場合に、ラジオボタンで選択したイメージ<img src="xxxxx">を表示させるにはどうしたらよいのですか？ どなたか教えてください、お願いします！！

    • ベストアンサー
    • HTML
  • Formのラジオボタンリセット方法

    下記のradioボタンのグループr1、r2、r3、r4のうちグループr1とr2だけを同時にリセットする方法はありますか？ グループ1つリセットする方法はわかりますが、2つリセットになると方法が分かりません。 良い方法はありませんか？よろしくお願いします。 <form> <p> <input type="radio" name="r1" value="1" checked>1<br> <input type="radio" name="r1" value="2">2<br> <input type="radio" name="r1" value="3">3 </p> <p> <input type="radio" name="r2" value="a" checked>a<br> <input type="radio" name="r2" value="b">b<br> <input type="radio" name="r2" value="c">c </p> <p> <input type="radio" name="r3" value="a" checked>a<br> <input type="radio" name="r3" value="b">b<br> <input type="radio" name="r3" value="c">c </p> <p> <input type="radio" name="r4" value="a" checked>a<br> <input type="radio" name="r4" value="b">b<br> <input type="radio" name="r4" value="c">c </p> </form>

  • ラジオボタンとテキストを同時にグレーアウトさせる

    <input type=radio name="1" value = 'A1'">A1<br> <input type=radio name="1" value = 'A2'">A2<br> <input type=radio name="1" value = 'A3'">A3<br> <input type=radio name="1" value = 'A4'">A4<br> <input type=radio name="1" value = 'A5'">A5<br> <form> <input type=radio name="tex" onClick="textform.textin.value = 'B1'">B1<br> <input type=radio name="tex" onClick="textform.textin.value = 'B2'">B2<br> <input type=radio name="tex" onClick="textform.textin.value = 'B3'">B3<br> <input type=radio name="tex" onClick="textform.textin.value = 'B4'">B4<br> <input type=radio name="tex" onClick="textform.textin.value = 'B5'">B5<br> </form> <form id="textform" action="#"> ここに文字が表示されます <input id="textin" type="text" size="30"> </form> A1を選択した場合、B2とB4とテキストエリアをグレーアウトさせる A2を選択した場合、B3とテキストエリアをグレーアウトさせる この記述の方法がわかりません。 初心者ですので、どなたかご教授おねがいします。

  • JavaScriptで画像を変更する

    質問が分かりずらいと思いますが、お願いします。 <body>内に↓が書かれています。 <script language="JavaScript"> <!-- function ChangePics() { for(i = 0; i < 3; i++) document.images[i].src = "white.jpg"; } // --> </script> <img src="black.jpg"><br> <img src="black.jpg"><br> <img src="black.jpg"><br> <form> <input type="button" value="画像一括変更" onclick="ChangePics()"></input> </form> ------------------------------------------------------------ [画像一括変更]ボタンをクリックすると表示されていた３枚の「black.jpg」が「white.jpg」に切り替わります。 ですが、画像のsrcへのアクセスは「document.images[i].src」で 行っているため、 <img src="black.jpg"><br> <img src="black.jpg"><br> <img src="black.jpg"><br> の上に他の画像がある場合はその画像が「white.jpg」に変更されてしまいます。 ですが、<img src="black.jpg" name = "pic1">のようにname属性を付けるのは処理が面倒になるので、避けたいです。 質問の意図は、「作ったJavaScriptのプログラムをブログに載せたいが、そのプログラムの上にほかの画像があるため、正常に動作しない。」ということです。

  • ラジオボタンとチェックボックスの計算について

    ラジオボタンとチェックボックスで選択して、その合計を表示させたいのですが、合計の最高は50になる用に作ったのですが、9点にしかなりません。 私が考えるに、<script language="JavaScript">～</script>の間が間違っていると思うのですがどうでしょうか？ 皆様ご教授の程お願いします。 <script language="JavaScript"> <!-- // 項目の合計を計算 function ttlValue() { chn = 10; // ラジオボタンとチェックボックスの総数 ttl = 0; for(i=0; i<chn; i++) { if(document.nForm.elements[i].checked) { ttl += eval(document.nForm.elements[i].value); } } document.nForm.result.value = ttl; } //--> </script> </head> <body alink="#000000" bgcolor="#f0f8ff" link="#00ffff" text="#000000" vlink="#ff0000"> <br> それぞれの項目で該当する回答を1つずつ選択して下さい。 <form name="nForm">項目1<br> <input name="ch1" value="3" checked="checked" type="radio">a<br> <input name="ch1" value="2" type="radio">b<br> <input name="ch1" value="1" type="radio">c<br> <input name="ch1" value="0" type="radio">d<br> <br> 項目2<br> <input name="ch2" value="3" checked="checked" type="radio">a<br> <input name="ch2" value="2" type="radio">b<br> <input name="ch2" value="1" type="radio">c<br> <input name="ch2" value="0" type="radio">d<br> <br> 項目3<br> <input name="ch3" value="3" checked="checked" type="radio">a<br> <input name="ch3" value="2" type="radio">b<br> <input name="ch3" value="1" type="radio">c<br> <input name="ch3" value="0" type="radio">d<br> <br> 項目4<br> <input name="ch4" value="1" checked="checked" type="radio">a<br> <input name="ch4" value="0" type="radio">b<br> <br> 項目5<br> <input name="ch5" value="1" checked="checked" type="radio">a<br> <input name="ch5" value="0" type="radio">b<br> <br> オプションがあれば選択して下さい。（複数選択可）<br> <input name="bx1" value="1" type="checkbox">1<br> <input name="bx1" value="1" type="checkbox">2<br> <input name="bx1" value="1" type="checkbox">3<br> <input name="bx1" value="1" type="checkbox">4<br> <input name="bx1" value="1" type="checkbox">5<br> <input name="bx1" value="1" type="checkbox">6<br> <input name="bx1" value="1" type="checkbox">7<br> <input name="bx1" value="1" type="checkbox">8<br> <input name="bx1" value="1" type="checkbox">9<br> <input name="bx1" value="1" type="checkbox">10<br> <input name="bx1" value="1" type="checkbox">11<br> <input name="bx1" value="1" type="checkbox">12<br> <input name="bx1" value="1" type="checkbox">13<br> <input name="bx1" value="1" type="checkbox">14<br> <input name="bx1" value="1" type="checkbox">15<br> <input name="bx1" value="1" type="checkbox">16<br> <input name="bx1" value="1" type="checkbox">17<br> <input name="bx1" value="1" type="checkbox">18<br> <input name="bx1" value="1" type="checkbox">19<br> <input name="bx1" value="1" type="checkbox">20<br> <input name="bx1" value="1" type="checkbox">21<br> <input name="bx1" value="1" type="checkbox">22<br> <input name="bx1" value="1" type="checkbox">23<br> <input name="bx1" value="1" type="checkbox">24<br> あなたの獲得したメダルは何色？<br> <select name="ch2"> <option value="0" selected="selected">なし</option> <option value="5">金メダル</option> <option value="3">銀メダル</option> <option value="1">銅メダル</option> </select> <br> <br> メダル獲得まで何年かかりましたか？<br> 項目6<br> <input name="ch6" value="10" checked="checked" type="radio">20年以上<br> <input name="ch6" value="5" type="radio">19年～10年<br> <input name="ch6" value="3" type="radio">9年～5年<br> <input name="ch6" value="1" type="radio">4年～3年<br> <input name="ch6" value="0" type="radio">2年未満<br> <br> <input value="合計金額を計算" onclick="ttlValue()" type="button"><br> <br> 合計<input name="result" size="10" type="text"> </form> <br>

  • javascript radioボタンの制御

    お世話になります。 javascript初心者です。 下記のようなケース　input　のnamaが異なる場合において radioボタンを使用してどちらかを選択させたいのですが 通常のhtmlだと両方に選択が入ってしまうので困っております。 javascriptでひとつだけを選択させることが可能と聞きましたが、 どのようにしたらよいか見当がつかなかったため質問させていただきました。 どうぞよろしくお願いいたします。 <html> <body> <form> <input type="radio" name="flgMale" value="1">男 <input type="radio" name="flgFemale" value="1">女 </form> </body> </html>

  • ラジオボタンについて

    つまらない質問ですがどうか教えてください。 <form name="myform"> ・ ・ ・ <INPUT TYPE="RADIO" NAME="R1" VALUE="1">関連あり</INPUT> <INPUT TYPE="RADIO" NAME="R1" VALUE="2">関連なし</INPUT> <INPUT TYPE="RADIO" NAME="R1" VALUE="3">不明</INPUT> </form> 上記のようなラジオボタンを作ったのですが、 このラジオボタンのチェックされた値を取得するには document.myForm.cGyoumu.value ではできないのでしょうか？ LOOPさせながらdocument.myForm.elements(i).checked で探さないと取得できないのでしょうか？ 同じフォーム内にラジオボタンが複数あるため、 この方法はあまりやりたくありません。 ほかに方法がありましたら、どうか教えてください。

  • ＜至急お願いいたします。ラジオボタンについて。＞

    ＜至急お願いいたします。ラジオボタンについて。＞ こんにちは。 メモ帳からHTMLでホームページを作る際に ラジオボタンを使いたいのですが <form action="Ａ.htm"> <input type="radio" name="url" value="A.htm">Ｂ（ラジオボタンの横に来る言葉（ページ名など））<br> <br> <form action="Ｃ.htm"> <input type="radio" name="url" value="Ｃ.htm">Ｄ（B同様。）<br> <br> <input type="submit" value="Go"> と、やってもラジオボタンは２つともできるのですが 「Go」を押したときにAのページへは何の問題もなく飛べるのですが Bを選択して「Go」を押した際に、 Ｂページへは飛ばずにＡページに飛んでしまいます。 どなたかわかる方がいましたら よろしくお願いします。 わかりにくい説明で申し訳ありません(>_<) HTMLについては詳しくわからないど素人なので わかりやすい回答を頂けたら幸いです。

  • 複数のラジオボタン選択肢によりsubmitを押せなくする

    初めて質問させていただきます。 ラジオボタンが下記の選択状態の時だけ「送信（submit）」ボタンを enable で表示させたいです。 １：●　２：○ １：●　２：○ それ以外の選択肢では「送信（submit）」ボタンを disabl で押せないようにしたいです。 調べて、近い動作にはなりましたが、javascriptに関して 殆ど知識がないため、これから先がさっぱりわかりません。 ぜひ教えを乞いたく参りました。お知恵をお貸しください<(__)> どうぞ宜しくお願い致します。 <HTML> <HEAD> <script type="text/javascript"><!-- function unlock1(el){el.form.send.disabled=false;} function unlock2(el){el.form.send.disabled=true;} //--> </script> <form> 1:<input type="radio" name="radio1" value="1" onClick="unlock1(this)"> 2:<input type="radio" name="radio1" value="2" onClick="unlock2(this)"><br> 1:<input type="radio" name="radio2" value="1" onClick="unlock1(this)"><br> 2:<input type="radio" name="radio2" value="2" onClick="unlock2(this)"><br> <input name="send" type="submit" value="送信" disabled > </form> </BODY> </HTML>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する