Can someone help me figure out where I've gone wrong? I have a code snippet here that's meant to toggle between two images on click, but nothing happens when I click the image. An alert in the click function is triggered successfully, but not within the if statement. 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>