Jquery/Javascript changing img SRC with IF/ELSE statement

Question

i am pretty new to javascript and I am not able to get an IF/ELSE statement to work in a kind of basic configurator I am experimenting, I am sure there's something dumb I am doing. I have a main image that changes to show the result of a selection, the problem is that the IF statement doesn't seem to work properly, like if it wasn't going through the conditions: basically when selecting a color (black/silver) there are no problems, but when clicking on inserts it should change scr performing the if/else test to change the scr attribute accordingly.

    var img = $("#picture");

    $("#case_black").click(function() {
        img.attr("src", "http://s32.postimg.org/xzqjausjp/black_b.jpg");
    });

    $("#case_silver").click(function() {
        img.attr("src", "http://s32.postimg.org/j2n46ylmt/silver_s.jpg");
    });

    $("#insert_silver").click(function() {
        if (img.src == "http://s32.postimg.org/xzqjausjp/black_b.jpg") {
            img.attr("src", "http://s32.postimg.org/wfq99kqh1/black_s.jpg");
        } else {
            img.attr("src", "http://s32.postimg.org/j2n46ylmt/silver_s.jpg");
        }       
    });

Here is a fiddle to help you help me:

https://jsfiddle.net/1qdwaa8o/

and a snippet:

	var img = $("#picture");
	
    $("#case_black").click(function() {
    img.attr("src", "http://s32.postimg.org/xzqjausjp/black_b.jpg");
  });
  
    $("#case_silver").click(function() {
    img.attr("src", "http://s32.postimg.org/j2n46ylmt/silver_s.jpg");
  });
  
    $("#insert_silver").click(function() {
		if (img.src == "http://s32.postimg.org/xzqjausjp/black_b.jpg") {
				img.attr("src", "http://s32.postimg.org/wfq99kqh1/black_s.jpg");
		} else {
				img.attr("src", "http://s32.postimg.org/j2n46ylmt/silver_s.jpg");
		}		
	});

	body{
	background-color:black;
	padding:0;
	margin:0;
	border:0;
	text-align:center;
	}
	
	.main{
	width:432px;
	height:422px;
	position:absolute;
	display:inline-block;
	margin-left:-216px;
	margin-top:10%;
	}
		 
	#img_wrapper{
	width:350px;
	margin-left:41px;
	}
	
	#selector_wrapper{
	width:auto;
	}
	   
    .selector_button{
	width:50px;
	height:50px;
	border-radius:25px;
	border:1px solid #1C1C1C;
	margin: 0 10px;
	cursor:pointer;
	}
	
	.clear{
	clear:both;
	}
	
	#case_black{
	background-image:url("http://s32.postimg.org/ipqo3nx1d/black.png");
	float:left;
	}
	
	#case_silver{
	background-image:url("http://s32.postimg.org/5qtwxrim9/silver.png");
	float:left;
	}
	
	#insert_wood{
	background-image:url("http://s32.postimg.org/ulderu3gh/wood.png");
	float:left;
	}
	
	#insert_silver{
	background-image:url("http://s32.postimg.org/5qtwxrim9/silver.png");
	float:left;
	}
	
	#insert_black{
	background-image:url("http://s32.postimg.org/ipqo3nx1d/black.png");
	float:left;
	}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<body>
	<div class="main">
		<div id= "img_wrapper"> 
			<img id= "picture" src="http://s32.postimg.org/xzqjausjp/black_b.jpg" alt="CD1000 with different finishes" />
		</div>
		<div id= "selector_wrapper">
			<div id= "case">
				<div class= "selector_button" id= "case_black"></div>
				<div class= "selector_button" id= "case_silver"></div>
			</div>
			<div class= "clear"></div>
			<div id= "inserts">
				<div class= "selector_button" id= "insert_black"></div>
				<div class= "selector_button" id= "insert_silver"></div>
				<div class= "selector_button" id= "insert_wood"></div>
			</div>
		</div>
	</div>
</body>

Roamer-1888 · Accepted Answer · 2016-05-08 15:34:10Z

1

img is a jQuery object, therefore img.src will be undefined.

You need to test img[0].src or img.prop('src').

answered May 8, 2016 at 15:34

Roamer-1888

19.3k5 gold badges35 silver badges45 bronze badges

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

Comments

mehulmpt · Accepted Answer · 2016-05-08 15:37:45Z

0

Get/set src of image using img.attr("src") and not img.src

Or you can make use of: img.get(0).src. img.get(0) is similar to document.querySelector('someSelectorToSelectYourImageAbove').src;

answered May 8, 2016 at 15:37

mehulmpt

16.7k13 gold badges54 silver badges90 bronze badges

Collectives™ on Stack Overflow

Jquery/Javascript changing img SRC with IF/ELSE statement

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related