javascript - Changing Images src with Event "onclick"

<!DOCTYPE html>
<html>
<body>

<img id = "imageOne" src = "circleRed.png" onclick = "changeColor()"/>

<script>
var image =  document.getElementById("imageOne");

function changeColor() {
if (image.src == "circleRed.png") {
    image.src = "circleBlue.png"; 
} else {
    image.src = "circleRed.png";
}
}
</script>
</body>
</html>

This whole program may seem to work but no. I'll just be able to change the color of my image once. After clicking for the second time, nothing happens. What I mean is that I can only change the color from Red to Blue. Could you please help me figure out why?

<!DOCTYPE html>
<html>
<body>

<img id = "imageOne" src = "circleRed.png" onclick = "changeColor()"/>

<script>
var image =  document.getElementById("imageOne");

function changeColor() {
if (image.src == "circleRed.png") {
    image.src = "circleBlue.png"; 
} else {
    image.src = "circleRed.png";
}
}
</script>
</body>
</html>

Share Improve this question edited Dec 5, 2015 at 7:00 asked Dec 5, 2015 at 6:38 MiguelC 3081 gold badge3 silver badges10 bronze badges

you are missing closing } . it just a typo right ? – Anik Islam Abhi Commented Dec 5, 2015 at 6:56
@AnikIslamAbhi yeah it's just a typo, sorry – MiguelC Commented Dec 5, 2015 at 6:59
1 you can check like this image.src.indexOf( "circleRed.png")>-1 .. it's mean image is circleRed – Anik Islam Abhi Commented Dec 5, 2015 at 7:02
@AnikIslamAbhi oh okay. By the way, what do you call the "indexOf"? is it an attribute? – MiguelC Commented Dec 5, 2015 at 7:06
indexOf is an extension method . it'll check if this contain in a string or and array.. If it contain it'll return the index else -1. – Anik Islam Abhi Commented Dec 5, 2015 at 7:21

Add a ment |

5 Answers 5

Sorted by: Reset to default 2

Here is the solution:

<!DOCTYPE html>
<html>
    <body>

        <img id ="imageOne" src ="circleRed.png" onclick = "changeColor()"/>

        <script>
            var image =  document.getElementById("imageOne");

            function changeColor()
            {
                if (image.getAttribute('src') == "circleRed.png")
                {
                    image.src = "circleBlue.png";
                }
                else
                {
                    image.src = "circleRed.png";
                }
            }
        </script>
    </body>
</html>

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

Move this inside function before if statement

image.src returns the physical path of image. So you can use indexOf to match image name. Following code snippet may help you.

function changeColor(image) {
    if (image.src.indexOf("circleRed.png")>-1) {
        image.src = "circleBlue.png"; 
    } else {
        image.src = "circleRed.png";
    }
}

<img id = "imageOne" src = "circleRed.png" onclick = "changeColor(this)"/>

try this code. just make sure to use (img.src.match) .And script inside the body.

var img = document.getElementById("image1");
img.addEventListener("mouseover", function(){
      if(img.src.match("images/image1.jpg")){
           img.src ="images/image1_2.jpg";}
       else {
           img.src = "images/image1.jpg"
            }  
})

<img src="images/image1.jpg" id="image1" />

function changeColor(image) {
    if (image.src.indexOf("circleRed.png")>-1) {
        image.src = "circleBlue.png"; 
    } else {
        image.src = "circleRed.png";
    }
}

<img id = "imageOne" src = "circleRed.png" onclick = "changeColor(this)"/>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Changing Images src with Event "onclick" - Stack Overflow

5 Answers 5

与本文相关的文章

评论列表(0)