質問をすることでしか得られない、回答やアドバイスがある。

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

新規登録して質問してみよう
ただいま回答率
85.48%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

2775閲覧

jQuery NaN と表示される

kokok

総合スコア145

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2019/05/21 18:40

html

1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title>jquery</title> 6<link rel="stylesheet" href="style1.css"> 7</head> 8<body> 9 10 <div class="form-box"> 11 12 <p class="buy_itemu_menu" data-price="2500"> 13 人力飛行機 <span class="kakaku">(定価 2,500円 / 会員価格 2,300円 )</span> 14 </p> 15 16 <select name="人力飛行機数量" style="width: 150px;"> 17 18 <option data-num="0" value="0個" selected>0個</option> 19 <option data-num="1" value="1個">1個</option> 20 <option data-num="2" value="2個">2個</option> 21 <option data-num="3" value="3個">3個</option> 22 </select> 23 </div> 24 25 <div class="form-box"> 26 27 <p class="buy_itemu_menu" data-price="1000"> 28 ラーメン <span class="kakaku">(定価 1,00円 / 会員価格 8,00円 )</span> 29 </p> 30 31 <select name="人力飛行機数量" style="width: 150px;"> 32 33 <option data-num="0" value="0個" selected>0個</option> 34 <option data-num="1" value="1個">1個</option> 35 <option data-num="2" value="2個">2個</option> 36 <option data-num="3" value="3個">3個</option> 37 </select> 38 </div> 39 40 41 <div class="form-box"> 42 43 <p class="buy_itemu_menu" data-price="10000"> 44 時計 <span class="kakaku">(定価 10,000円 / 会員価格 9,500円 )</span> 45 </p> 46 47 <select name="人力飛行機数量" style="width: 150px;"> 48 49 <option data-num="0" value="0個" selected>0個</option> 50 <option data-num="1" value="1個">1個</option> 51 <option data-num="2" value="2個">2個</option> 52 <option data-num="3" value="3個">3個</option> 53 </select> 54 </div> 55 56<input id="item_price_total" class="" name="小計" value="0円" readonly> 57 58 59 60 61 <script src="//code.jquery.com/jquery-3.4.1.min.js"></script> 62 <script> 63 64 $("select").change(function(){ 65 66 var hairetu = []; 67 for(var i = 0;i < $(".buy_itemu_menu").length; i++ ){ 68 69 var item_price =$("buy.item.menu").eq(i).data("price"); 70 var item_select = $(".buy_itemu_menu").eq(i).next("select").find("option:selected").data("num"); 71 72 73 hairetu.push(item_price * item_select); 74 } 75 76 77 var total = 0; 78 for(var j = 0; j < hairetu.length; j++){ 79 total += hairetu[j]; 80 81 } 82 83 $("#item_price_total").val(total + "円"); 84 }); 85 86 87</script> 88</body> 89</html> 90 91 92 93

小計金額が NaN円 と表示されてしまいます。

Chrome開発者ツールでエラーは出てないのですが、教えて頂けると助かります。

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

コード中のjQueryセレクタの中で、
.buy_itemu_menubuy.item.menuになってる箇所があります。
そのため、 item_priceが正常に取得できずundefinedとなっており、NaNになっていると思われます。

セレクタなどは、できるだけコピペなどをして手で打たずにTypoしないようにしたほうが良いでしょう。

あと、本題とは関係ない部分ですが、インデントや = の前後の空白、
空行の開け方などはできるだけ統一し、視覚的にも綺麗なコードを書いたほうが、不思議とバグも発生し辛いので気に留めておくと良いと思います。

投稿2019/05/21 19:15

sansaisoba

総合スコア241

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kokok

2019/05/21 19:29

セレクタの部分を直したら解決しました。 同じようなところはコピペするようにします。 色々アドバイスありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問