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

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

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>

kei344

2016/05/28 09:18

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

yuma

2016/05/28 09:37

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

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

回答2件

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

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

投稿2016/05/28 10:58

kentei_syunrai

総合スコア946

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

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

###補足
上記以外にもスクリプトエラーが2つ出ます。
0. clearResults() という関数が定義されていない。
0. onButtonClick() の最後の行にスペルミスがある（誤）node.lastChild → (正) nodes.lastChild

ご参考になれば。

投稿2016/05/28 10:41

編集2016/05/28 10:44