javascript evalでのNaNエラーについて

evalが悪さをしてるのかもしれないのですが、safari等で実行結果がNaNとなってしまいます。
他に良い書き方がありますでしょうか。

行動規範の内容に同意します

回答1件

ベストアンサー

これだとどうなりますか？

javascript
1function dsp_calc() {
2  document.frm.result.value = (document.frm.num1.value|0) + (document.frm.num2.value|0) + (document.frm.num3.value|0);
3  document.frm.result2.value = Math.round((document.frm.result.value|0) * 1.08);
4  document.frm.result3.value = Math.round((document.frm.result.value|0) * (document.frm.num4.value|0) * 1.08);
5}

#####追記訂正

javascript
1function dsp_calc() {
2  document.frm.result.value = (document.frm.num1.value-0) + (document.frm.num2.value-0) + (document.frm.num3.value-0);
3  document.frm.result2.value = Math.round((document.frm.result.value-0) * 1.08);
4  document.frm.result3.value = Math.round((document.frm.result.value-0) * (document.frm.num4.value-0) * 1.08);
5}

こうでした、すみません。
あと、input要素のvalue属性は"0"のようにダブルクォーテーションでかっこしておいた方がいいです。

#####再追記

javascript
1function dsp_calc() {
2  document.frm.result.value = $('[name=num1]:checked').val()*1 + $('[name=num2]:checked').val()*1 + $('[name=num3]:checked').val()*1;
3  document.frm.result2.value = Math.round( $('[name=result]').val() * 1.08 );
4  document.frm.result3.value = Math.round( $('[name=result]').val() * $('[name=num4]:checked').val() * 1.08);
5}

iOSのsafariで確認しました。

投稿2015/11/16 06:48

編集2015/11/16 11:16

Lhankor_Mhy

総合スコア36057

atsu_iro

2015/11/16 07:47

回答ありがとうございます！ NaNにはならなくなったんですが、「０」となり、正しくvalueの値を引っ張って計算してくれないですね＿|￣|○

Lhankor_Mhy

2015/11/16 08:25

ということは document.frm.num1 などの記述が間違っていることになりますね。BODY部を見せていただければ原因が分かると思います。

atsu_iro

2015/11/16 08:36

こういった感じです。そのまま貼り付けてしまい大変恐縮です。。 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Tabslet jQuery plugin | Yet another plugin for tabs</title> <meta name="description" content="Yet another jQuery plugin for tabs, lightweight, easy-to-use and with some extra features"> <link rel="shortcut icon" href="favicon.ico" />  <meta name="viewport" content="width=device-width, initial-scale=1">  <script type="text/javascript" src="javascripts/vendor/modernizr.custom.js"></script>  <link rel="stylesheet" href="stylesheets/splend.css"> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <script type="text/javascript" src="http://www.webopixel.net/lab/js/jquery.js"></script> <script type="text/javascript"> $(function() { setSize(); //リサイズしたら実行 $(window).resize(function(){ setSize(); }); }); function setSize() { //画像サイズ指定 var imgW = 2000; var imgH = 1330; //ウィンドウサイズ取得 var winW = $(window).width(); var winH = $(window).height(); var scaleW = winW / imgW; var scaleH = winH / imgH; var fixScale = Math.max(scaleW, scaleH); var setW = imgW * fixScale; var setH = imgH * fixScale; var moveX = Math.floor((winW - setW) / 2); var moveY = Math.floor((winH - setH) / 2); $('#bg').css({ 'width': setW, 'height': setH, 'left' : moveX, 'top' : moveY }); } </script> </head> <body> <img src="images/splend.jpg" width="100%" height="100%" id="bg" /> <div class="container"> <div class="twelve columns"> <form name=frm> <article> <div class='tabs tabs_animate'> <ul class='horizontal'> <li class=""><a href="#tab-1">cut</a></li> <li class=""><a href="#tab-2">color</a></li> <li class=""><a href="#tab-3">perm</a></li> <li class=""><a href="#tab-4">coupon</a></li> </ul> <br class="both"> <div id='tab-1' class="sample"> <input type=radio name="num1" value=0 id="cut00" checked><label for="cut00">選択なし</label> <input type=radio name="num1" value=5000 id="cut01" checked><label for="cut01">カット<br />¥5000</label> </div> <div id='tab-2' class="sample"> <input type=radio name="num2" value=0 id="color00" checked><label for="color00">選択なし</label> <input type=radio name="num2" value=6000 id="color01"><label for="color01">カラーS<br />¥6000</label> <input type=radio name="num2" value=6500 id="color02"><label for="color02">カラーM<br />¥6500</label> <input type=radio name="num2" value=7000 id="color03"><label for="color03">カラーL<br />¥7000</label> <input type=radio name="num2" value=7000 id="color04"><label for="color04">グレイカラーS<br />¥7000</label> <input type=radio name="num2" value=7200 id="color05"><label for="color05">グレイカラーM<br />¥7200</label> <input type=radio name="num2" value=7500 id="color06"><label for="color06">グレイカラーL<br />¥7500</label> <input type=radio name="num2" value=6500 id="color07"><label for="color07">ヘアマニュキアS<br />¥6500</label> <input type=radio name="num2" value=6700 id="color08"><label for="color08">ヘアマニュキアM<br />¥6700</label> <input type=radio name="num2" value=7000 id="color09"><label for="color09">ヘアマニュキアL<br />¥7000</label> <input type=radio name="num2" value=5000 id="color10"><label for="color10">トーンアップ<br />¥5000</label> <input type=radio name="num2" value=7500 id="color11"><label for="color11">香草カラー<br />¥7500</label> <input type=radio name="num2" value=7500 id="color12"><label for="color12">ヘナ<br />¥7500</label> <input type=radio name="num2" value=5500 id="color13"><label for="color13">リタッチ<br />¥5500</label> <input type=radio name="num2" value=500 id="color14"><label for="color14">ハイライト<br />¥500</label> <input type=radio name="num2" value=500 id="color15"><label for="color15">ローライト<br />¥500</label> </div> <div id='tab-3' class="sample"> <input type=radio name="num3" value=0 id="perm00" checked><label for="perm00">選択なし</label> <input type=radio name="num3" value=6500 id="perm01"><label for="perm01">パーマS<br />¥6500</label> <input type=radio name="num3" value=7000 id="perm02"><label for="perm02">パーマM<br />¥7000</label> <input type=radio name="num3" value=7500 id="perm03"><label for="perm03">パーマL<br />¥7500</label> <input type=radio name="num3" value=15000 id="perm04"><label for="perm04">ストレートS<br />¥15000</label> <input type=radio name="num3" value=16000 id="perm05"><label for="perm05">ストレートM<br />¥16000</label> <input type=radio name="num3" value=17000 id="perm06"><label for="perm06">ストレートL<br />¥17000</label> <input type=radio name="num3" value=10000 id="perm07"><label for="perm07">エアウェーブ<br />¥10000</label> <input type=radio name="num3" value=10000 id="perm08"><label for="perm08">デジタルパーマ<br />¥10000</label> <input type=radio name="num3" value=20000 id="perm09"><label for="perm09">ストデジ<br />¥20000</label> </div> <div id='tab-4' class="sample"> <input type=radio name="num4" value=0 id="coupon00" checked><label for="coupon00">選択なし</label> <input type=radio name="num4" value=0.8 id="coupon01"><label for="coupon01">新規割引<br />20%OFF</label> <input type=radio name="num4" value=0.9 id="coupon02"><label for="coupon02">学割A<br />10%OFF</label> <input type=radio name="num4" value=0.8 id="coupon03"><label for="coupon03">学割B<br />20%OFF</label> <input type=radio name="num4" value=0.7 id="coupon04"><label for="coupon04">学割C<br />30%OFF</label> <input type=radio name="num4" value=0.6 id="coupon05"><label for="coupon05">学割D<br />40%OFF</label> <input type=radio name="num4" value=0.9 id="coupon06"><label for="coupon06">ご紹介割引<br />10%OFF</label> </div> </article> <br class="both"> <article class="result_box"> <div> <p>ロゴ</p> <p></p> </div> <br class="both" /> <div class="result_box_in"> 税抜価格 <input type=text name="result" style=border:none;width:80px;font-size:14px;><br /> <span style=font-size:20px;font-wight:bold;>税込合計価格</span> <input type=text name="result2" style=border:none;width:80px;font-size:20px;font-wight:bold;><br /> <span style=font-size:20px;font-wight:bold;>クーポン利用時合計価格</span> <input type=text name="result3" style=border:none;width:80px;font-size:20px;font-wight:bold;><br /> <input type=button value="計算する" onclick=dsp_calc()> </div> </article> </form> </div> </div>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="javascripts/vendor/jquery-1.9.1.min.js"><\/script>')</script>  <script type="text/javascript" src="javascripts/vendor/jquery.tabslet.min.js"></script> <script type="text/javascript" src="javascripts/vendor/rainbow-custom.min.js"></script> <script type="text/javascript" src="javascripts/vendor/jquery.anchor.js"></script> <script src="javascripts/initializers.js"></script>  </body> </html>

Lhankor_Mhy

2015/11/16 08:53

あ、そうか、なんで整数だと思ってしまったんだろ。追記訂正します。

atsu_iro

2015/11/16 09:14

わーーーご丁寧にありがとうございます。でも、やっぱりNaNとなってしまいます＿|￣|○ chromeはいけるんですけ、safariがどうしてもダメで。。。 safariでよくない記述がソースの中にはいってるんですかね。。 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Tabslet jQuery plugin | Yet another plugin for tabs</title> <meta name="description" content="Yet another jQuery plugin for tabs, lightweight, easy-to-use and with some extra features"> <link rel="shortcut icon" href="favicon.ico" />  <meta name="viewport" content="width=device-width, initial-scale=1">  <script type="text/javascript" src="javascripts/vendor/modernizr.custom.js"></script>  <link rel="stylesheet" href="stylesheets/splend.css"> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <script type="text/javascript" src="http://www.webopixel.net/lab/js/jquery.js"></script> <script type="text/javascript"> $(function() { setSize(); //リサイズしたら実行 $(window).resize(function(){ setSize(); }); }); function setSize() { //画像サイズ指定 var imgW = 2000; var imgH = 1330; //ウィンドウサイズ取得 var winW = $(window).width(); var winH = $(window).height(); var scaleW = winW / imgW; var scaleH = winH / imgH; var fixScale = Math.max(scaleW, scaleH); var setW = imgW * fixScale; var setH = imgH * fixScale; var moveX = Math.floor((winW - setW) / 2); var moveY = Math.floor((winH - setH) / 2); $('#bg').css({ 'width': setW, 'height': setH, 'left' : moveX, 'top' : moveY }); } </script> </head> <body> <img src="images/splend.jpg" width="100%" height="100%" id="bg" /> <div class="container"> <div class="twelve columns"> <form name=frm> <article> <div class='tabs tabs_animate'> <ul class='horizontal'> <li class=""><a href="#tab-1">cut</a></li> <li class=""><a href="#tab-2">color</a></li> <li class=""><a href="#tab-3">perm</a></li> <li class=""><a href="#tab-4">coupon</a></li> </ul> <br class="both"> <div id='tab-1' class="sample"> <input type=radio name="num1" value="0" id="cut00" checked><label for="cut00">選択なし</label> <input type=radio name="num1" value="5000" id="cut01"><label for="cut01">カット<br />¥5000</label> </div> <div id='tab-2' class="sample"> <input type=radio name="num2" value="0" id="color00" checked><label for="color00">選択なし</label> <input type=radio name="num2" value="6000" id="color01"><label for="color01">カラーS<br />¥6000</label> <input type=radio name="num2" value="6500" id="color02"><label for="color02">カラーM<br />¥6500</label> <input type=radio name="num2" value="7000" id="color03"><label for="color03">カラーL<br />¥7000</label> <input type=radio name="num2" value="7000" id="color04"><label for="color04">グレイカラーS<br />¥7000</label> <input type=radio name="num2" value="7200" id="color05"><label for="color05">グレイカラーM<br />¥7200</label> <input type=radio name="num2" value="7500" id="color06"><label for="color06">グレイカラーL<br />¥7500</label> <input type=radio name="num2" value="6500" id="color07"><label for="color07">ヘアマニュキアS<br />¥6500</label> <input type=radio name="num2" value="6700" id="color08"><label for="color08">ヘアマニュキアM<br />¥6700</label> <input type=radio name="num2" value="7000" id="color09"><label for="color09">ヘアマニュキアL<br />¥7000</label> <input type=radio name="num2" value="5000" id="color10"><label for="color10">トーンアップ<br />¥5000</label> <input type=radio name="num2" value="7500" id="color11"><label for="color11">香草カラー<br />¥7500</label> <input type=radio name="num2" value="7500" id="color12"><label for="color12">ヘナ<br />¥7500</label> <input type=radio name="num2" value="5500" id="color13"><label for="color13">リタッチ<br />¥5500</label> <input type=radio name="num2" value="500" id="color14"><label for="color14">ハイライト<br />¥500</label> <input type=radio name="num2" value="500" id="color15"><label for="color15">ローライト<br />¥500</label> </div> <div id='tab-3' class="sample"> <input type=radio name="num3" value="0" id="perm00" checked><label for="perm00">選択なし</label> <input type=radio name="num3" value="6500" id="perm01"><label for="perm01">パーマS<br />¥6500</label> <input type=radio name="num3" value="7000" id="perm02"><label for="perm02">パーマM<br />¥7000</label> <input type=radio name="num3" value="7500" id="perm03"><label for="perm03">パーマL<br />¥7500</label> <input type=radio name="num3" value="15000" id="perm04"><label for="perm04">ストレートS<br />¥15000</label> <input type=radio name="num3" value="16000" id="perm05"><label for="perm05">ストレートM<br />¥16000</label> <input type=radio name="num3" value="17000" id="perm06"><label for="perm06">ストレートL<br />¥17000</label> <input type=radio name="num3" value="10000" id="perm07"><label for="perm07">エアウェーブ<br />¥10000</label> <input type=radio name="num3" value="10000" id="perm08"><label for="perm08">デジタルパーマ<br />¥10000</label> <input type=radio name="num3" value="20000" id="perm09"><label for="perm09">ストデジ<br />¥20000</label> </div> <div id='tab-4' class="sample"> <input type=radio name="num4" value="0" id="coupon00" checked><label for="coupon00">選択なし</label> <input type=radio name="num4" value="0.8" id="coupon01"><label for="coupon01">新規割引<br />20%OFF</label> <input type=radio name="num4" value="0.9" id="coupon02"><label for="coupon02">学割A<br />10%OFF</label> <input type=radio name="num4" value="0.8" id="coupon03"><label for="coupon03">学割B<br />20%OFF</label> <input type=radio name="num4" value="0.7" id="coupon04"><label for="coupon04">学割C<br />30%OFF</label> <input type=radio name="num4" value="0.6" id="coupon05"><label for="coupon05">学割D<br />40%OFF</label> <input type=radio name="num4" value="0.9" id="coupon06"><label for="coupon06">ご紹介割引<br />10%OFF</label> </div> </article> <br class="both"> <article class="result_box"> <div> <p>ロゴ</p> <p></p> </div> <br class="both" /> <div class="result_box_in"> 税抜価格 <input type=text name="result" style=border:none;width:80px;font-size:14px;><br /> <span style=font-size:20px;font-wight:bold;>税込合計価格</span> <input type=text name="result2" style=border:none;width:80px;font-size:20px;font-wight:bold;><br /> <span style=font-size:20px;font-wight:bold;>クーポン利用時合計価格</span> <input type=text name="result3" style=border:none;width:80px;font-size:20px;font-wight:bold;><br /> <input type=button value="計算する" onclick=dsp_calc()> </div> </article> </form> </div> </div>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="javascripts/vendor/jquery-1.9.1.min.js"><\/script>')</script>  <script type="text/javascript" src="javascripts/vendor/jquery.tabslet.min.js"></script> <script type="text/javascript" src="javascripts/vendor/rainbow-custom.min.js"></script> <script type="text/javascript" src="javascripts/vendor/jquery.anchor.js"></script> <script src="javascripts/initializers.js"></script>  </body> </html>

Lhankor_Mhy

2015/11/16 11:03

RadioNodeList.value がサポートされてないようですね、知らなかった。ソースをみるとjQueryを使ってもいいようなので、そっちで書き直します。

atsu_iro

2015/11/16 12:25

動きました！！！本当に本当に本当にありがとうございます！！！！！どうしようもなく困ってたので大変たすかりました！！！ Javascriptって本当に奥が深いですね。勉強になりました。本当にありがとうございましたm(__)m

行動規範の内容に同意します