CODEWITHSUNDEEP
javascript
Lenigod
Lenigod

Reputation: 153

Using Javascript to change an Image src

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.

Upvotes: 0

Views: 190

Answers (4)

jfriend00
jfriend00

Reputation: 708146

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.

Upvotes: 1

user967940
user967940

Reputation:

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.

Upvotes: 0

Onimusha
Onimusha

Reputation: 3385

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

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

Two == means equal to

One = means set value to

Upvotes: 4

Porkbutts
Porkbutts

Reputation: 964

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?).

Upvotes: 6

Related Questions