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

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

ただいまの
回答率

87.93%

条件分岐のelse以降が実行されません…

受付中

回答 2

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 1,049

score 13

こんにちは。
条件分岐がうまく動作せず困っているので助けていただきたいです。

function checkClick(i) {
    if(document.getElementById("q"+String(i)).lastChild.src == document.getElementById("f").lastChild.src){
        var check = confirm("不正解!");
     }else{ 
        var check = confirm("正解!");
     }
}


というコードを書きたいのですがこれだとelse以降が実行されないです。

function checkClick(i) {
    if(i == 0){
        var check = confirm("不正解!");
     }else{ 
        var check = confirm("正解!");
     }
}


にすると動くので
document.getElementById("q"+String(i)).lastChild.src == document.getElementById("f").lastChild.src
に問題があると思うのですが、どう書き直したら良いのでしょうか。

<HTML>

<HEAD>

<meta charset="utf-8" />

    <title>Flicker Image Search</title>

<script>

// Flicker Photo Searchの実行

function imageSearch(){ 
    // ユーザ入力のクエリを取得
    var query = document.getElementById("searchText").value; 
    // FlickerPhotoSearchを実行するためのスクリプトを生成
    var new_script = document.createElement('script');       
    new_script.src = "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=385adb1830e1bb1830f186c02b12dbd5&format=json&jsoncallback=showResults&safe_search=1&sort=relevance&tags="+query;
    // 生成したスクリプトを自HTMLの先頭に追加してブラウザに実行させる
    document.head.appendChild(new_script); 
}

// 検索結果の表示(dataに検索結果が入る(FlickerがJSON形式で入れてくれる))
function showResults(data){ 
    // Flickerから戻るdata形式は https://www.flickr.com/services/api/flickr.photos.search.htmlのexample results
    clearResults(1);
    if (data.stat != "ok"){ // 検索が成功しているかどうか確認、失敗の時はstatusを表示して戻る
        document.write(data.stat);
        return;
    }
    //最初の8個のデータのみ利用
    var max_num = 8;
    if (data.photos.photo.length <8) max_num = data.photos.photo.length;//8個より検索結果が少ない場合の処理
    for (var i=0; i<max_num; i++){
      var photo = data.photos.photo[i];
      // imgエレメントを生成
      var new_image = document.createElement('img'); 
      // imgのsrcにi番目の結果(URL)を設定 (
      var url="https://farm"+photo.farm+".staticflickr.com/"+photo.server+"/"+photo.id+"_"+photo.secret+"_m.jpg";
      new_image.src = url ;
      new_image.width="100";      // 幅を100ピクセルに設定 
       // imgエレメントを検索結果のi番目のセルに追加
       document.getElementById("r"+String(i)).appendChild(new_image);
      }
}

function saveResult(flg){
    var saved_image = document.createElement('img');
    saved_image.src = document.getElementById("r"+String(flg)).lastChild.src;
    saved_image.width = "100";
    document.getElementById("f").appendChild(saved_image);
    document.getElementById("f").lastChild.addEventListener("click", function(){onClickDo(this);});
}

function onButtonClick() {
          //質問表示
          target = document.getElementById("output");
          target.innerText = document.forms.form1.text.value;

          var fimage = document.createElement('img');
          fimage.src = document.getElementById("f").lastChild.src;
          fimage.width = "100";

          document.getElementById("q"+String(0)).appendChild(fimage);
          var nodes = document.getElementById("f");
          nodes.removeChild(node.lastChild);


}

function checkClick(i) {
    if(document.getElementById("q"+String(i)).lastChild.src == document.getElementById("f").lastChild.src){
        var check = confirm("不正解!");
     }else{ 
        var check = confirm("正解!");
     }
}


</script>

</HEAD>



<BODY> 

<!-- ボタンの配置 -->

<h1> Make Your ドボン問題</h1>

 <!--⭐︎⭐︎⭐︎-->
  <form name="form1" id="form1" action="">
<p> 質問:<input id="text" type="text" size= "50" /> </p>
</form>

<p> 画像検索:<input id="searchText" type="text" /><input id="searchButton" type="button" value="検索" onclick="imageSearch()" /> </p>

<br/>

<h2>画像検索結果</h2>

<!-- 画像検索結果を8個表示するための領域をテーブルにより構築 -->

<table border="4" bordercolor="#ffffff" bgcolor="#cccccc">

 <tr  bgcolor="#ffffff"> <!-- onclickで各領域がクリックされた時にsaveResultを実行するように設定 -->

     <td id="r0"  width="100" height="100" onClick="saveResult(0)"></td>

     <td id="r1"   width="100" onClick="saveResult(1)"></td>

     <td id="r2"   width="100" onClick="saveResult(2)"></td>

     <td id="r3"  width="100" onClick="saveResult(3)"></td>

     <td id="r4" width="100" onClick="saveResult(4)"></td>

     <td id="r5"   width="100" onClick="saveResult(5)"></td>

     <td id="r6" width="100" onClick="saveResult(6)"></td>

     <td id="r7"  width="100" onClick="saveResult(7)"></td>

 </tr>

</table>

<h2>ドボン画像</h2>
<p>ひとつだけ選択してね!</p>



<table border="4" bordercolor="#ffffff" bgcolor="#cccccc">

 <tr align="top" >

    <td id="f" width="800" height="100" ></td>

 </tr>

</table>



<input id="searchButton" type="button" value="決定" onClick="onButtonClick()" />



<h1>ドボン問題</h1>

 <!--⭐︎⭐︎⭐︎-->
 <div id="output"></div>

 <br/>

<br/>

<table border="4" bordercolor="#ffffff" bgcolor="#cccccc">

 <tr  bgcolor="#ffffff"> <!-- onclickで各領域がクリックされた時にsaveResultを実行するように設定 -->

     <td id="q0"  width="100" height="100" onclick="checkClick(0)"></td>

     <td id="q1"   width="100" onclick="checkClick(1)"></td>

     <td id="q2"   width="100" onclick="checkClick(2)"></td>

     <td id="q3"  width="100" onclick="checkClick(3)"></td>

     <td id="q4" width="100" onclick="checkClick(4)"></td>

     <td id="q5"   width="100" onclick="checkClick(5)"></td>

     <td id="q6" width="100" onclick="checkClick(6)"></td>

     <td id="q7"  width="100" onclick="checkClick(7)"></td>

     <td id="q8"  width="100" onclick="checkClick(8)"></td>

 </tr>

</table>


</BODY>

</HTML>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2016/05/28 18:18

    具体的にHTMLの構造を質問文に追記いただいたほうが回答を得られやすいと思います。

    キャンセル

  • yuma

    2016/05/28 18:37

    ありがとうございます。追記いたしました。

    キャンセル

回答 2

0

checkClick() が呼び出された時点では、すでに <td id="f"></td> の中に子要素はない(その前に「決定」ボタンがクリックされた時に onButtonClick() の最後ですべての子要素を削除しているため)。

なのに、checkClick() の中で、すでに消してしまった <img> の src を読取ろうとした処でスクリプトエラーが発生し、処理がそこで異常終了してしまう。ということだと思います。なので、「else の後が処理されない」ではなく、「if 文そのものも含めてそれ以降の処理が行われない」という状態です。

補足

上記以外にもスクリプトエラーが2つ出ます。

  1. clearResults() という関数が定義されていない。
  2. onButtonClick() の最後の行にスペルミスがある(誤)node.lastChild → (正) nodes.lastChild

ご参考になれば。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

0

・onButtonClick関数の最後の行がnodeになっています。nodesではないですか?
・clearResults関数? がないと定義されていませんが…どこから読んでるのでしょうか?

if文の式自体はおかしくない気がします。動作や目的が分からないので絶対的なことは言えませんが。
(子要素がないときはlastChildはnullになるので注意が必要です。)

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

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