Using Javascript to change an Image src

Question

I have a really simple piece of code that is supposed to change the img src of my img called innings. It's pretty straightforward, that onclick I call the function changeImage, and depending on the current src of the image, I change it to the next iteration of images. The code looks like:

    <script type="text/javascript" >
        function changeImage() {
            var mySrc = document.getElementById('inning');
            alert(mySrc.src);
            if (mySrc.src = "1st.png") {
                alert('im in here');
                mySrc.src = "2nd.png";
            }
            else if (mysrc.src = "2nd.png")
                mysrc.src = "3rd.png";
            else if (mysrc.src = "3rd.png")
                mysrc.src = "4th.png";
            else if (mysrc.src = "4th.png")
                mysrc.src = "5th.png";
            else if (mysrc.src = "5th.png")
                mysrc.src = "6th.png";
            else if (mysrc.src = "6th.png")
                mysrc.src = "7th.png";
            else if (mysrc.src = "7th.png")
                mysrc.src = "8th.png";
            else if (mysrc.src = "8th.png")
                mysrc.src = "9th.png";
            else if (mysrc.src = "9th.png")
                mysrc.src = "10th.png";
            else if (mysrc.src = "10th.png")
                mysrc.src = "1st.png";

        }
    </script>
</head>
<body>
    <center>      <label>SlowPitch Player Rotation</label></center>
    <br /><br />

    <Center>
        <img id="inning" src="1st.png" 
                onclick='changeImage()' />
    </Center>

Now the problem I'm having is that every time I hit the image, the changeImage() function hits the alert, letting me know the src is still 1st.png; meanwhile my first alert tells me that I have 2nd.png as my src.

I'd suggest mysrc.getAttribute('src'), since the mysrc.src property (usually) returns an absolute path, even if the path in the attribute is relative. Also <label> is used to associate a form-element (input, select or textarea) with a text-caption; and <center> is deprecated. — David Thomas
– David Thomas, Commented May 9, 2013 at 22:01

Porkbutts · Accepted Answer · 2013-05-09 21:58:31Z

6

You are using = which is assignment. The value is getting assigned to the variable; you want to check for equality in your if statements. Use either == (are they equal?) or === (are they equal AND same type?).

answered May 9, 2013 at 21:58

Porkbutts

9747 silver badges13 bronze badges

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

Comments

Onimusha · Accepted Answer · 2013-05-09 21:58:53Z

4

All the if (mySrc.src = "image_name") { should be

if (mySrc.src == "1st.png") {

Two == means equal to

One = means set value to

answered May 9, 2013 at 21:58

Onimusha

3,3842 gold badges28 silver badges32 bronze badges

Comments

jfriend00 · Accepted Answer · 2013-05-09 23:23:38Z

1

As others have said, your main problem was not using the right === or == for comparison and referencing the .src propery will return an absolute path so your comparisons probably wouldn't have worked for that reason either.

Anyway, I would suggest a new and more compact code design where you DRY up your code (remove redundancy) like this.

This parses the number out of the string rather than checking for an exact match which saves all the if/else comparisons and once you have the number, you can get the next name by indexing directly into an array of names.

<script type="text/javascript" >
    function changeImage() {
        var names = ["1st", "2nd", "3rd", "4th", "5th", "6th", "7th", "8th", "9th", "10th"];
        var mySrc = document.getElementById('inning');
        // parse the number out of the existing .src string
        var matches = mySrc.src.match(/(\d+).*?\.png$/);
        if (matches) {
            // since array is 0 indexed and names are 1 indexed, we don't need to add one
            // as it is already one more than it was
            var num = parseInt(matches[1], 10);
            if (num >= names.length) {
                num = 0;
            }
            mySrc.src = names[num] + ".png";
        }
    }
</script>

FYI, if your filenames only had the number in them (like img1.png) without the suffixes on them, then the code could be even simpler as you wouldn't even need the array of name because you could just manufacture the new name from the previous number.

edited May 9, 2013 at 23:23

answered May 9, 2013 at 22:09

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

1 Comment

David Thomas Over a year ago

Thank you; I was a couple of minutes away from doing much the same (though I was planning to go through various iterations of improvements to explain them incrementally). You've just saved quite a bit of time, so +1 and thank you! =D

user967940 · Accepted Answer · 2013-05-09 22:00:33Z

0

Your Problem is, that you do not compare two values in your if statement but instead assign a value:

if (mySrc.src = "1st.png")

should read

if (mySrc.src === "1st.png")

Else you assign "1st.png" to mySrc.src over and over again.

answered May 9, 2013 at 22:00

user967940

Collectives™ on Stack Overflow

Using Javascript to change an Image src

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related