尝试在图像之间切换时，我在使用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;