title: Javascript - if statement not changing image src
body: <p>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? </p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;link href="../CSS/209.css" rel="stylesheet" type="text/css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
   &lt;div id="trim"&gt;green209green209green209&lt;/div&gt;
  
   &lt;h1 align="right"&gt;about House Felice&lt;/h1&gt;
  
  &lt;center&gt;
  
   &lt;img src="../Images/fakevid.png" width="70%" height="48%"&gt;&lt;img src="../Images/videonav1.png" width="25%" height="48%"&gt;
  
  
  &lt;div id="wrapper"&gt;
  
  &lt;div id="kitchen" align="left"&gt; 
      &lt;img id="pricetile1" src="../Images/kitchen.png"&gt;
      &lt;img id="pricetile2" src="../Images/french.png" data-price="100" /&gt;
      &lt;img id="pricetile3" src="../Images/german.png" data-price="200" /&gt;
  &lt;/div&gt;
  
  &lt;div id="floor" align="left"&gt;
      &lt;img id="pricetile1" src="../Images/floors.png"&gt;
      &lt;img id="pricetile4" src="../Images/mixed.png" data-price="300"&gt;
      &lt;img id="pricetile5" src="../Images/allwood.png" data-price="400"&gt;
  &lt;/div&gt;
  
  &lt;div id="energy" align="left"&gt;
      &lt;img id="pricetile1" src="../Images/energy.png"&gt;
      &lt;img id="pricetile6" src="../Images/green.png" data-price="500"&gt;
      &lt;img id="pricetile7" src="../Images/standard.png" data-price="600"&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  
  
  &lt;div id="price"&gt;&lt;p&gt;total: $&lt;span id="total"&gt;0.00&lt;/span&gt;&lt;p&gt;&lt;/div&gt;
  &lt;div id="next"&gt; &lt;p&gt;next house&lt;/p&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>JAVASCRIPT</strong>:</p>
  
  <pre><code>&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
   &lt;script type="text/javascript" src="js/script.js"&gt;&lt;/script&gt;
  
  
   &lt;script&gt;
  
  
               $('#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' &amp;&amp; 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 &lt; 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;
  
  &lt;/script&gt;
  </code></pre>