Question

170

Changing Images src with Event onclick

rated 0 times [ 176] [ 6] / answers: 1 / hits: 27412 / 9 Years ago, sat, december 5, 2015, 12:00:00

<!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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kamronr

Add To Favorites

Follow

Total Points: 749

Total Questions: 110

Total Answers: 122

Location: Dominica

Member since Sat, Nov 5, 2022

2 Years ago

kamronr questions

1 How to enforce semicolon in Typescript interface

Mon, Dec 21, 20, 00:00, 3 Years ago

1 Jest - How do I reset object state for each test?

Fri, Oct 16, 20, 00:00, 4 Years ago

1 Change (Add/Remove) CSS Class On Mobile With JS or jQuery

Sat, Oct 3, 20, 00:00, 4 Years ago

1 Don't allow horizontal scroll when scrolling vertically (and vice versa)

Tue, Oct 1, 19, 00:00, 5 Years ago

1 How to extract text from PDF?

Sun, Jul 28, 19, 00:00, 5 Years ago

View All

answered 9 Years ago ryleymarkelb · Accepted Answer

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>