JAVA SCRIPT image image.src.match issue

Question

0.00/5 (No votes)

See more:

Hi,

I tried modifing the java script part of the below codes as

Original code:-

HTML

<html>
<img id="myImage" >
<script>

JavaScript

function changeImage() {
    var image = document.getElementById('myImage');
    if (image.src.match("bulbon")) {
        image.src = "pic_bulboff.gif";
    } else {
        image.src = "pic_bulbon.gif";
    }
}
</script>
</html>

Modified java script :-
function changeImage() {
    var image = document.getElementById('myImage');
    if (image.src == "pic_bulbon.gif") {
        image.src = "pic_bulboff.gif";
    } else {
        image.src = "pic_bulbon.gif";
    }
}

When this original code is executed the bulb will both on and off as many as times we click.
But when this modified code is executed the bulb will just on and it will not get off
Both are if loops but why is this happening? Kindly help me understand.

Posted 22-Nov-14 1:19am

Member 11255155

Updated 22-Nov-14 1:32am

Afzaal Ahmad Zeeshan

v2

Add a Solution

Comments

Afzaal Ahmad Zeeshan 22-Nov-14 7:33am

if is not a loop.

Can you create a fiddle for that? This doesn't seem to make any sense.

Richard MacCutchan 22-Nov-14 7:57am

Add some extra display code into the function to see exactly what values are in each variable, and what is the result of the if statement.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Ishpreet Kaur · Answer 1 · 2014-11-22T07:52:00

Solution 1

The better way to match image src attribute is :

JavaScript

function changeImage() {
    var image = document.getElementById('myImage');
    
    if (image.getAttribute('src')=="pic_bulbon.gif") {
        image.src = "pic_bulboff.gif";
    } else {
         
        image.src = "pic_bulbon.gif";
    }
}

This works.

Posted 22-Nov-14 7:52am

Ishpreet Kaur

Comments

Ishpreet Kaur 22-Nov-14 13:56pm

The modified function you written will get on and then doesn't get off. When first time, you click on image, then else part work, and when you again click, then it doesn't go to if part, that's why, it does not get off on second time click.