尝试在图像之间切换时，Javascript Onclick事件有点麻烦

Question

因此，对于我的其中一个实验室，我正在尝试使用一个src获取模糊的图像，以使其显示为来自其他来源的清晰图像。 到目前为止，我仅设法将模糊的图像更改为清晰的图像，而没有相反的方法。

到目前为止，我已经将if语句和字符串indexOf作为我的实验室要求的一部分。 现在请记住，按照我的指示，不允许我为此项目编辑任何HTML。

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;