需要帮助调整changeImage js代码

Question

I'm a js beginner and I need some help to clean this code up. It's a changeImage situation, where I'm showing a check box with images rather than with an actual form check box. So the user can click an empty check box and the click changes the image to a check mark. And they can click again to unchecked. That all works, but this is the issue.

After you click one of the check box images, you then have to click twice to get another check box image to change. I'd like it to be a smooth, one click situation and I don't know what's preventing that. Here's a snippet of the code I'm using -

var newsrc = "img/checked.gif";

function changeImage() {
    if(newsrc == "img/checked.gif") {
        document.images["challenge"].src = "img/checked.gif";
        document.images["challenge"].alt = "Completed";
        newsrc = "img/checkBox.gif";
    } else {
        document.images["challenge"].src = "img/checkBox.gif";
        document.images["challenge"].alt = "Unfinished";
        newsrc = "img/checked.gif";
    }
}

function changeImage2() {
    if(newsrc == "img/checked.gif") {
        document.images["goal1"].src = "img/checked.gif";
        document.images["goal1"].alt = "Completed";
        newsrc = "img/checkBox.gif";
    } else {
        document.images["goal1"].src = "img/checkBox.gif";
        document.images["goal1"].alt = "Unfinished";
        newsrc = "img/checked.gif";
    }
}

There are six images in all in the script. I'm just showing the first two. Any help you can give would be great.

Answer 1

What's happening is that all of the functions are sharing the same newsrc variable and when you click one the others think they have been clicked as well.

You might be better off writing a single function which toggles the src and calling that function when any item is clicked.

Something like:

function toggleImage(clickedImage){
    var checkedSrc='img/checked.gif';
    var currentSrc=clickedImage.src;
    if(currentSrc.indexOf(checkedSrc) ==  currentSrc.length-checkedSrc.length){
        clickedImage.src='img/checkBox.gif';
        clickedImage.alt='Unfinished';
    }else{
        clickedImage.src='img/checked.gif';
        clickedImage.alt='Complete';
    }
}

And in your html

<img id="whatever_1" src="img/checkBox.gif" alt="Unfinished" onclick="toggleImage(this)" />
<img id="whatever_2" src="img/checkBox.gif" alt="Unfinished" onclick="toggleImage(this)" />
<img id="whatever_3" src="img/checkBox.gif" alt="Unfinished" onclick="toggleImage(this)" />