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

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

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

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

Q&A

解決済

1回答

9200閲覧

javascriptでifが効かないケース

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

0グッド

0クリップ

投稿2018/04/22 15:54

編集2018/04/23 02:13

ifとelseの分岐が効かずにアラートがでません。

次のjavascriptは後述の抜粋でして、この部分のアラートがでないのです。

javascript

1 //チェックが2個未満のときのアラート 2 }else{ 3 alert('2個未満ですね'); 4 }

どうしたらelse以下の条件が効くようになるでしょうか?
(チェックが2個未満のときの条件分岐はどうやったらできるのか?)

ご教示いただけますと嬉しいです。
よろしくお願いいたします。


▼動くサンプル
https://jsfiddle.net/ojr8xrso/

▼そのコード

html

1<div class="check_wrap"> 2 <ul id="fluits_list"> 3 <li><input id="fluits_apple" class="check_fluits" name="check_fluits" value="apple" type="checkbox"> 4 <label for="fluits_apple" class="check_label"> 5 <span class="i apple damekamo"></span> 6 </label> 7 </li> 8 <li><input id="fluits_grape" class="check_fluits" name="check_fluits" value="grape" type="checkbox"> 9 <label for="fluits_grape" class="check_label"> 10 <span class="i grape damekamo"></span> 11 </label> 12 </li> 13 <li><input id="fluits_banana" class="check_fluits" name="check_fluits" value="banana" type="checkbox"> 14 <label for="fluits_banana" class="check_label"> 15 <span class="i banana daijobu"></span> 16 </label> 17 </li> 18 <li><input id="fluits_kiwi" class="check_fluits" name="check_fluits" value="kiwi" type="checkbox"> 19 <label for="fluits_kiwi" class="check_label"> 20 <span class="i kiwi daijobu"></span> 21 </label> 22 </li> 23 </ul> 24</div> 25 26<div class="output pink"> 27 <p><span id="output1"></span></p> 28 <p><span id="output2"></span></p> 29</div> 30 31<div class="output aqua"> 32 <p><span id="outputA"></span></p> 33 <p><span id="outputB"></span></p> 34</div> 35 36<div class="none" style="display:none;"> 37<p id="now_apple">appleを最初にチェックしたらダメです</p> 38<p id="now_grape">grapeを最初にチェックしたらダメです</p> 39<p id="now_banana">だいじょうぶです</p> 40<p id="now_kiwi">だいじょうぶです</p> 41</div> 42 43

javascript

1$(function(){ 2 3 ////チェックしたらピンクに画像をコピー 4 $('input[name=check_fluits]').change(function(){ 5 var clone=$(this).siblings().find('.i').clone(); 6 if($('input[name=check_fluits]:checked').length>2) { 7 $(this).prop("checked",false); 8 alert('チェックは2個までです'); 9 return false; 10 } 11 if($(this).prop('checked')){ 12 $('#output1,#output2').filter(function(){ 13 return $(this).html()==""; 14 }).eq(0).html(clone); 15 }else{ 16 console.log($.map(clone.prop('classList'),function(x){return "."+x;}).join("")); 17 $('#output1,#output2').has($.map(clone.prop('classList'),function(x){return "."+x;}).join("")).html(""); 18 } 19 }); 20 $('input[name=check_fluits]').prop('checked',false).filter('[value=apple],[value=banana]').prop('checked',true).trigger("change"); 21 22 ////チェックしたらアラート 23 $('input[name=check_fluits]').change(function(){ 24 25 //ピンクの画像を水色にコピー 26 var cmc_unit1 = $('#output1').html(); 27 $('#outputA').html(cmc_unit1); 28 var cmc_unit2 = $('#output2').html(); 29 $('#outputB').html(cmc_unit2); 30 31 //「.i」の次のクラス(.appleとか)を取り出して代入(アラートで使うため) 32 var pair1 = $('#output1 .i').get(0).className.split(" ")[1]; 33 var pair2 = $('#output2 .i').get(0).className.split(" ")[1]; 34 35 //チェックが2個のときのアラート 36 if($('#fluits_list :checked').length == 2){ 37 var result = $('#now_' + pair1).text(); 38 39 //1個目にチェックしたやつが「.damekamo」を持ってたら、HTMLにある「それを最初にチェックしたらダメです」をアラート 40 if (($('#output1').find('.i').hasClass('oishi'))){ 41 alert(result); 42 } else 43 //2個目にチェックしたやつが「.oishi」を持ってたら、HTMLにある「それを最初にチェックしたらダメです」をアラート 44 if (($('#output1').find('.i').hasClass('mazui'))){ 45 alert(result); 46 } 47 48/******************** 49次のアラートがでない! 50********************/ 51 52 //チェックが2個未満のときのアラート 53 }else{ 54 alert('2個未満ですね'); 55 } 56 57 }); 58 59});

css

1.list { 2 list-style: none; 3} 4.i::before { 5 content: ''; 6 display: block; 7 width: 30px; 8 height: 30px; 9 background-size: contain; 10 vertical-align: middle; 11 z-index: 1; 12 right: 0; 13 background-repeat: no-repeat; 14 background-size: cover; 15 object-fit: cover; 16 margin: 0 auto !important; 17} 18.apple:before { 19 background-image: url(https://cdn.amanaimages.com/cen3tzG4fTr7Gtw1PoeRer/02343000826.jpg); 20} 21.grape:before { 22 background-image: url(http://stat.profile.ameba.jp/profile_images/20150329/22/ae/2E/j/o064006401427634068143.jpg); 23} 24.banana:before { 25 background-image: url(https://cdn.amanaimages.com/preview640/10214001337.jpg); 26} 27.kiwi:before { 28 background-image: url(https://shop.yamatonoen.co.jp/upload/save_image/18H-078-11_01.png); 29} 30 31.pink { 32 background: pink; 33 padding: 20px; 34} 35.aqua { 36 background: aqua; 37 padding: 20px; 38}

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2018/04/22 16:00

仕様を明確にして、問題点を具体的に記述してください。「どうしたいのか」を相手に伝えましょう。
yambejp

2018/04/23 00:35

なにをやったときに、どういう結果がほしいのか、それはソースでいうどの部分で実現しているつもりなのかを提示して下さい。とりあえずエラーが出ている箇所をなおすことからでしょうけどね
m.ts10806

2018/04/23 01:13

いちおう のコードを提示されても回答側は困るばかりです。そろそろ「丸投げ」低評価が絶えない理由と対策を考えられた方が良いかと。(質問テンプレートをきっちり使えていればおおよそ避けられるはずですが)
Lhankor_Mhy

2018/04/23 01:33

エラーメッセージが出ている時には、エラーメッセージをご提示いただく方が望ましいですね。
退会済みユーザー

退会済みユーザー

2018/04/23 02:02

Kosuke_Shibuyaさん、失礼しました。問題は「else」で条件分岐ができないということです。どうしたらできるか?を質問したかったです。
退会済みユーザー

退会済みユーザー

2018/04/23 02:03

yambejpさん、おはようございます。お世話になっております。今回欲しい結果は「else以下の条件分岐」です。質問のソースでは「//チェックが2個未満のときのアラート」の部分です。(実際はアラートではないのですが、とにかくこの条件分岐が効かないのが不思議です)。
退会済みユーザー

退会済みユーザー

2018/04/23 02:04

mts10806さん、仰るとおりですね。ご指摘ありがとうございます。
退会済みユーザー

退会済みユーザー

2018/04/23 02:05

Lhankor_Mhyさん、エラーはコンソールにでるものですよね?TypeErrorというのが表示されますけれど、これだけ言われてもちょっと意味不明すぎますよね..(;'∀')
guest

回答1

0

ベストアンサー

Jsfiddleにコードがあるので、とりあえずControl+Shift+ENTERして独立したページでその内容だけを動かし(※)バナナのチェックを外したところconsoleに以下の例外が出てました。

Uncaught TypeError: cannot read property 'className' of undefined at HTMLInputElement.<anonymous> (.(index):138) ...

138行目を見ると$('#output2 .i')というオブジェクトが存在しなかったのが原因と思います。これは質問者さんがJsfiddleにコードの一部を記載した際のミスなのか元々のコードに起因するのかわかりませんが、まずはデバッグされてはいかがでしょう。


余談:
※: 自分はJsfiddleでControl+Shift+ENTERすると独立したページで動かせるのでデバッグしやすいというのを今回初めて知りました。質問の際にJsfiddleに再現するコードを用意しておくと閲覧者が簡単に動かせていいですね。もちろんJsfiddleが便利とはいえよくデバッグせずに質問するのはよくないと思います。

https://stackoverflow.com/questions/17271644/jsfiddle-errors-wont-show


追記:

デバッグというのをやったことがなく

そうでしたか。自分でデバッグしてもわからない場合はどこまでどう調べたかを明記した上で尋ねるのは悪くないと思います。でも全然デバッグせずに尋ねるのはNGです。・・・というより、プログラミングとはどういうものかをよく再認識された方がよいと思います。そもそも自分でデバッグしないことにはプログラムは完成しません。例えばエラーが出たら

  • そこに書いてあることを「読み」、
  • それが何に起因することか「推測」し、
  • デバッグして掴んだ「事実」を「推測に照らして確認」し、原因を絞り込んでいく

いうプロセスを繰り返すのがデバッグです。デバッグ技術はコードを書くことに負けず劣らず大事です。

「エラーメッセージに何書いてあるかわからない」と不満になることが多いかもしれません。しかし計算機は「あなたが書いたコードの意味なんぞちっとも理解してやしません」。計算機はコードに書かれている通りに盲目的に実行をすることしかできない「高速な阿呆」ですので、彼が見つけた「局所的な事象=エラー」が何故起こったかはプログラマーたる人間が突き止めるしかないのです。

TypeError: cannot read property 'className' of undefined

と計算機がいったなら「ふむふむ、x.classNameとやったけど、xがundefinedだったんだな、じゃぁなんでxはundefinedになったんだろう・・・」と推論を進めていくのは人間にしかできないのです。javascriptエンジンにはプログラマーの意図は把握できませんので、

  • classNameというプロパティー名が間違っているのか
  • xがundefinedだったことが間違っているのか
  • そもそもこの行が実行されたこと自体が期待外だったのか

なんてことをわかってやしません。それゆえ「undefinedにclassNameという属性はありません」としか言うことができないのです。それを解釈して正しい姿をイメージするのは人間だけにできることなんです。

投稿2018/04/23 01:59

編集2018/04/23 04:47
KSwordOfHaste

総合スコア18392

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

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

退会済みユーザー

退会済みユーザー

2018/04/23 02:55 編集

バナナのチェックを外す(チェックを1つにする)と、 <div class="output pink"> <p><span id="output1"></span></p> <p><span id="output2"></span></p> </div> の<span id="output2"></span>に出力される「.i」がなくなるからですね。 この機能(チェックを外したら、「.i」がなくなり、ピンクから画像を消す機能)は必要なのですが、、 でも、この機能があるせいで、else以下の条件(//チェックが2個未満のときのアラート)が効かなくなってしまっているのですか…。 それは困りましたね。うーん。考えてみます。ヒントをありがとうございます。 ちなみにデバッグせずに質問するのはよくない。とのこと。 デバッグというのをやったことがなく、そのような常識も欠けておりました。少し調べてみます。ご指摘ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問