JavaScript element src change

Question

So I have two images, "safety-pin-green" and "safety-pin-blue" and I want to change the image elements source depending on which the contents of the source when called, this will be for mouse over and mouse out. Here's the JavaScript:

function changeImage(id) {
var src = document.getElementById(id).src;  
    if (src.search("green") != 0) {
        src = src.replace("green", "blue");
    } else {
        src = src.replace("blue", "green");
    }
    document.getElementById(id).src = src;
}

and the HTML tag i'm using:

<img id="safety-pin" src="../images/safety-pin-green.jpg" alt="Safety pin"
    onmouseover="changeImage(id)" onmouseout="changeImage(id)"></img>

The code almost works, the images go blue, but they don't return to the green image when the mouse leaves the image, any ideas why this is?

Community · Accepted Answer · 2020-06-20 09:12:55Z

4

From MDN documentation of search,

Return value

The index of the first match between the regular expression and the given string; if not found, -1.

Replace

src.search("green") != 0

with

src.search("green") !== -1

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jan 15, 2017 at 5:34

Arun Kumar Mohan

11.9k3 gold badges27 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Zachary Over a year ago

I see, I wasn't to sure how the search feature works. thank you :)

Zachary · Accepted Answer · 2017-01-15 05:35:50Z

0

I fixed it :) a simple '>' solves my problem.

if (src.search("green") > 0) {
    src = src.replace("green", "blue");
}...

answered Jan 15, 2017 at 5:35

Zachary

651 silver badge11 bronze badges

Collectives™ on Stack Overflow

JavaScript element src change

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related