こんにちは。
条件分岐がうまく動作せず困っているので助けていただきたいです。
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>