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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 996

atsu_iro

score 5

<SCRIPT LANGUAGE="JavaScript">
  <!--
  function dsp_calc() {
    document.frm.result.value = eval(document.frm.num1.value) + eval(document.frm.num2.value) + eval(document.frm.num3.value);
    document.frm.result2.value = Math.round(eval(document.frm.result.value) * 1.08);
    document.frm.result3.value = Math.round(eval(document.frm.result.value) * eval(document.frm.num4.value) * 1.08);
  }
  //-->
  </SCRIPT>

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

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

これだとどうなりますか?
function dsp_calc() {
  document.frm.result.value = (document.frm.num1.value|0) + (document.frm.num2.value|0) + (document.frm.num3.value|0);
  document.frm.result2.value = Math.round((document.frm.result.value|0) * 1.08);
  document.frm.result3.value = Math.round((document.frm.result.value|0) * (document.frm.num4.value|0) * 1.08);
}



追記訂正
function dsp_calc() {
  document.frm.result.value = (document.frm.num1.value-0) + (document.frm.num2.value-0) + (document.frm.num3.value-0);
  document.frm.result2.value = Math.round((document.frm.result.value-0) * 1.08);
  document.frm.result3.value = Math.round((document.frm.result.value-0) * (document.frm.num4.value-0) * 1.08);
}
こうでした、すみません。
あと、input要素のvalue属性は"0"のようにダブルクォーテーションでかっこしておいた方がいいです。



再追記
function dsp_calc() {
  document.frm.result.value = $('[name=num1]:checked').val()*1 + $('[name=num2]:checked').val()*1 + $('[name=num3]:checked').val()*1;
  document.frm.result2.value = Math.round( $('[name=result]').val() * 1.08 );
  document.frm.result3.value = Math.round( $('[name=result]').val() * $('[name=num4]:checked').val() * 1.08);
}
iOSのsafariで確認しました。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/11/16 18: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" />

    <!-- MOBILE -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- MODERNIZR -->
    <script type="text/javascript" src="javascripts/vendor/modernizr.custom.js"></script>

    <!-- STYLES -->
    <link rel="stylesheet" href="stylesheets/splend.css">

    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function dsp_calc() {
    document.frm.result.value = (document.frm.num1.value-0) + (document.frm.num2.value-0) + (document.frm.num3.value-0);
    document.frm.result2.value = Math.round((document.frm.result.value-0) * 1.08);
    document.frm.result3.value = Math.round((document.frm.result.value-0) * (document.frm.num4.value-0) * 1.08);
    }
    //-->
    </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>





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

    <!-- JS -->
    <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>
    <!-- JS ends -->

    </body>
    </html>

    キャンセル

  • 2015/11/16 20:03

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

    キャンセル

  • 2015/11/16 21:25

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.22%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る