画像間の切り替えにJavascriptのOnclickイベントで少し問題があります

Question

私のラボでは、1つのsrcでぼやけた画像を別の画像から鮮明な画像として表示しようとしていますソース。これまでは、ぼやけた画像を鮮明な画像に変更することしかできませんでしたが、それ以外の方法は変更しませんでした。

これまでのところ、私は研究室の要件の一部としてif文と文字列indexOfを持っています。今私の指示では、私はこのプロジェクトのHTMLを編集することは許されていないことを覚えておいてください。あなたは `str`代わりにハードコードされた文字列に画像のSRCを入れてきました

function toggleImages(){ 

//(document.getElementById("clickimage").src = 'images/lab9_blurred'); 
//console.log(str.indexOf("clickimage")); 
//var images = 'images/lab9_blurred.jpg'; 

var str = "images/lab9_blurred.jpg"; 
    console.log(str.indexOf("blurred")); 

var str = "images/lab9_clear.jpg"; 
    console.log(str.indexOf("clear")) 

//click it once, it's true, click it again, it's false. That's what should happen. But how do we do that? 
//If image = "images/lab9_blurred.jpg" then for variable image we get clickimage, set variable name to lab 9 clear, and set image source to name. 

//if (fake == true){ 
if (str.indexOf("blurred") == 12){ 

    var image = document.getElementById("clickimage"); 
    var name = "images/lab9_blurred.jpg"; 
    image.src = name;  
     console.log(str.indexOf("blurred")); 
} 
else if (str.indexOf("clear") == 12) 
{ 

    var image = document.getElementById("clickimage"); 
    var name = "images/lab9_clear.jpg"; 
    image.src = name; 
     console.log(str.indexOf("clear")); 
    } 
}; 

window.onload = init; 

Answer 1

こんにちはコードを次してみてください...

function toggleImages(){ 

    var image = document.getElementById("clickimage"); 

    if (image.src.indexOf("blurred") == 12) 
    { 
     var str = "images/lab9_clear.jpg"; 
     console.log(str.indexOf("clear")) 
    } 
    else 
    { 
     var str = "images/lab9_blurred.jpg"; 
     console.log(str.indexOf("blurred")); 
    } 
    image.src = str; 
}; 

window.onload = init;