CODEWITHSUNDEEP
javascriptimagesrc
user2707702
user2707702

Reputation: 45

Javascript image swap isn't working

This is the first thing I have ever tried to make in javascript and I'm not sure why it isn't working. The goal is to simply swap images back and forth on a click event. I'm wondering if it is an issue with my relative links not working. I copied the code directly from another answer I found on this website so the error is probably very minor.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript">
    function swap248(){
        if(document.getElementById("normal248").src=="images/248img1.png"){
            document.getElementById("normal248").src="images/248img2.png";  
        }else if(document.getElementById("normal248").src=="images/248img2.png"){
            document.getElementById("normal248").src = "images/248img1.png";
        }
    }
</script>
</head>
<body>
    <img id="normal248" onclick="swap248()" src="images/248img1.png" width="294" height="461" alt=""/>
</body>
</html>

Upvotes: 0

Views: 302

Answers (3)

Pouki
Pouki

Reputation: 1664

You can try to test the last part of the url like this :

function swap248(){
    if(document.getElementById("normal248").src.match(/images\/248img1.png$/g){
        document.getElementById("normal248").src="images/248img2.png";  
    }else if(document.getElementById("normal248").src.match(/images\/248img2.png$/g){
        document.getElementById("normal248").src = "images/248img1.png";
    }
}

Caution : You need to escape the / character in the match pattern.

and add a $ at the end to verify it's the end of the src. (ie :.match(/images\/248img2.png$/g))

EDIT :

You can try : .match(/t\/[0-9]{3}img1.png$/g)

[0-9] means you are searching for numbers and {3} means the string must have 3 numbers before "img1" to match.

Upvotes: 0

cocco
cocco

Reputation: 16706

First of all you should use css to swap an image

in that case you don't even need javascript.

if you want i can show you an example ...

else if you want to use javascript here is your function but a little shorter

Assuming that your default image is images/248img1.png

function swap248() {
  var a = document.getElementById("normal248");
  a.x = '248img2' == a.x ? '248img1' : '248img2'; // short if
  a.src ='images/' + a.x + '.png';
}

How does this work?

Every element in javascriptis an object.

So you can add variables to this object.

In this case the first check fails as x is undefined.

and so it returns false and gives you the second image.

in the next check x is set to the second image and it returns the first one..

remove 'enter code here' after </html>

Upvotes: 0

Mohit Pandey
Mohit Pandey

Reputation: 3813

src property read full URL. Instead, you can maintain a variable to swap between two images.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript">
    var isFirstImage = true; // by default first image is shown
    function swap248(){
        if(isFirstImage){ // shows second image
        document.getElementById("normal248").src = "images/248img1.png";
        isFirstImage = false;
        } else { // shows first image
        document.getElementById("normal248").src="images/248img2.png";
        isFirstImage = true;
        }
    }
</script>
</head>
<body>
    <img id="normal248" onclick="swap248()" src="images/248img1.png" width="294" height="461"  alt=""/>
</body>
</html>

NOTE : Its only for very basic level. If you have several images to swap, you can maintain it in data(instead of variable) attribute of element which image is currently visible.

Upvotes: 1

Related Questions