Javascript - if statement not changing image src

Question

I'm just wondering if anyone can point out to me where I'm going wrong.. Here I have a small snippet of code that I would like to use to toggle between two images based on an onclick event. However, upon clicking on the image nothing happens. I placed an alert within the click function, which successfully triggered; though, when an alert was placed within the if statement, no alert was triggered. What did I mess up?

HTML:

<html>
<head>
<link href="../CSS/209.css" rel="stylesheet" type="text/css">
</head>

<body>

 <div id="trim">green209green209green209</div>

 <h1 align="right">about House Felice</h1>

<center>

 <img src="../Images/fakevid.png" width="70%" height="48%"><img src="../Images/videonav1.png" width="25%" height="48%">


<div id="wrapper">

<div id="kitchen" align="left"> 
    <img id="pricetile1" src="../Images/kitchen.png">
    <img id="pricetile2" src="../Images/french.png" data-price="100" />
    <img id="pricetile3" src="../Images/german.png" data-price="200" />
</div>

<div id="floor" align="left">
    <img id="pricetile1" src="../Images/floors.png">
    <img id="pricetile4" src="../Images/mixed.png" data-price="300">
    <img id="pricetile5" src="../Images/allwood.png" data-price="400">
</div>

<div id="energy" align="left">
    <img id="pricetile1" src="../Images/energy.png">
    <img id="pricetile6" src="../Images/green.png" data-price="500">
    <img id="pricetile7" src="../Images/standard.png" data-price="600">
</div>
</div>



<div id="price"><p>total: $<span id="total">0.00</span><p></div>
<div id="next"> <p>next house</p></div>

JAVASCRIPT:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
 <script type="text/javascript" src="js/script.js"></script>


 <script>


             $('#pricetile2').click(function(){

    console.log(document.getElementById("pricetile2").src);
    if (document.getElementById("pricetile2").getAttribute('src') == "../Images/french.png" )
    {
        document.getElementById("pricetile2").getAttribute('src') = "../Images/french2.png";
        console.log(1);
    }
    else 
    {
        document.getElementById("pricetile2").getAttribute('src') = "../Images/french.png";
        console.log(2);
    }   
 });

 var container = document.getElementById('wrapper');
 var lines = container.children;
 var numLines = lines.length;
 document.addEventListener('click', function(e) {
    if (e.target.tagName == 'IMG' && container.contains(e.target)) {
var selected = e.target.parentNode.getElementsByClassName('selected');
if (selected.length)
  selected[0].className = selected[0].className.replace('selected', '');
e.target.className = 'selected';
var total = 0;
for (var i = 0; i < numLines; i++) {
  var selected = lines[i].getElementsByClassName('selected');
  if (selected.length)
    total = total + Number(selected[0].dataset.price);
}
document.getElementById('total').innerHTML = Number(total).toFixed(2);
}
}, false);


 document.getElementById("calc").innerHTML = x;

</script>

Since you are already using jQuery you might try: $('#pricetile2').attr("src", "../Images/french2.png"); — Yogi
– Yogi, Commented May 21, 2015 at 23:59
What do you see if you alert(document.getElementById("pricetile2").src)? — Barmar
– Barmar, Commented May 22, 2015 at 0:01
your code is working. here's the fiddle with your code jsfiddle.net/21opzcq0 — Sushil
– Sushil, Commented May 22, 2015 at 0:01
@Sushil I deleted that, because he says he gets an alert outside the if, but not inside it. So the problem is with the if condition. — Barmar
– Barmar, Commented May 22, 2015 at 0:02
Also, I would not use src in your IF logic as it might not be what you expect. And I think that's the problem here ... it's always false and the image never changes. — Yogi
– Yogi, Commented May 22, 2015 at 0:02

klickagent.ch · Accepted Answer · 2015-05-22 00:03:26Z

3

console.log(document.getElementById("pricetile2").src);

shows the full url to the image instead of the relative path. eg. its not ../Images/french.png, but http://fiddle.jshell.net/Images/french.png (see http://jsfiddle.net/klickagent/wr01jxmb/)

therefore you need to check the full url to the image in the if statement.

As Barmar wrote: use

document.getElementById('pricetile2').getAttribute('src');

this gives you the relative path (the exact value in the src tag)

edited May 22, 2015 at 0:03

answered May 22, 2015 at 0:02

klickagent.ch

5596 silver badges21 bronze badges

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

3 Comments

Barmar Over a year ago

Or use .getAttribute('src') instead of .src.

Yogi Over a year ago

That's interesting. I always assumed that obj.getAttribute('src') would return the same value as obj.src ... but it doesn't.

Joshua Sky Greenough Over a year ago

So i just tried all of these suggestions, however, still no success :( I will edit post with the current, full code. Maybe the issue is elsewhere?

Drakes · Accepted Answer · 2015-05-22 00:09:57Z

2

The fastest change for this code to work is to change

if (document.getElementById("pricetile2").src == "../Images/french.png")

to

if (document.getElementById("pricetile2").src.indexOf("Images/french.png") >= 0)

or

if (document.getElementById("pricetile2").getAttribute("src") == "../Images/french.png")

because relative URLs cannot be directly compared as in your first attempt. (Credit for no.2 is Barmar)

edited May 22, 2015 at 0:09

answered May 22, 2015 at 0:04

Drakes

23.8k3 gold badges58 silver badges97 bronze badges

Comments

kennypu · Accepted Answer · 2015-05-22 00:02:18Z

1

since you're using jQuery, I recommend using jQuery for your src definition as well. With that said, using jQuery's .attr() function, you can do:

$('#pricetile2').click(function(){

    if ( $("#pricetile2").attr('src') == "../Images/french.png" ) 
    {
        $("#pricetile2").attr('src','../Images/french2.png');
    }
    else 
    {
        $("#pricetile2").attr('src','../Images/french.png');
    }   
});

The reason your if statement doesn't work, is because document.getElementById("pricetile2").src will return the absolute path, not relative path (eg. that will return http://example.com/Images/french.png).

answered May 22, 2015 at 0:02

kennypu

6,1332 gold badges24 silver badges29 bronze badges

Collectives™ on Stack Overflow

Javascript - if statement not changing image src

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related