Javascript - How can i return the sum of variables based on clicked objects

Question

I am still very new to javascript (so please forgive me for being dull). I'm currently working on a segment of script that will display a sum of integers based on which images are clicked. Moreover, there are three groups of two images that represent housing features, the user can choose one (of two) from each group. Each option corresponds to a different numerical price value, then based on which three features the user selects, a p-tag will return the sum of prices.

Can someone please give me suggestions or demonstrate how this can be achieved?

My HTML:

<div id="wrapper">

 <div id="kitchen" align="left"> 
    <img id="pricetile2" src="../Images/french.png">
    <img id="pricetile3" src="../Images/german.png">
 </div>

 <div id="floor" align="left">
    <img id="pricetile4" src="../Images/mixed.png">
    <img id="pricetile5" src="../Images/allwood.png">
 </div>

 <div id="energy" align="left">
    <img id="pricetile6" src="../Images/green.png">
    <img id="pricetile7" src="../Images/standard.png">
 </div>
</div>

<div id="price"> <p id="calc">total$here</div>

My Script:

<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>

var x = calculate();
var a
var b
var c

  $('#pricetile2').click(function(){
        a = 2;
  });
  $('#pricetile3').click(function(){
        a = 3;
  });
  $('#pricetile4').click(function(){
        b = 4;
  });
  $('#pricetile5').click(function(){
        b = 5;
  });
  $('#pricetile6').click(function(){
        c = 6;
  });
  $('#pricetile7').click(function(){
        c = 7;
  });

function calculate(a, b, c){
    return a + b + c;
}
document.getElementById("calc").innerHTML = x;

</script>

Answer 1

What this script does: on click check to see what was clicked, if it was an image inside the container, then find the currently selected item if there is one and set it to inactive. Then set the clicked element to active. After changing the selection, loop through all of the lines to find the selected item for each line and add the value of the data-price="" attribute together, then post that value inside <span id="total"></span>

 (function () { "use strict"; var wrap = document.getElementById('wrapper'), total = document.getElementById('total'), lines = wrap.children, line; wrap.addEventListener('click', function (e) { if (e.target.className.indexOf('pricetile') >= 0) { var selected = e.target.parentElement.getElementsByClassName('selected')[0]; if(selected) selected.className = selected.className.replace(' selected', ''); e.target.className += ' selected'; var sum = 0; for (var i = 0; line = lines[i]; i++) { var selected = line.getElementsByClassName('selected')[0]; if (selected) sum = sum + Number(selected.dataset.price); } total.innerHTML = Number(sum).toFixed(2); } }, false); })(); 

 <div id="wrapper"> <div id="kitchen"> <img src="http://lorempixel.com/50/50/" class="pricetile" data-price="100"> <img src="http://lorempixel.com/50/50/" class="pricetile" data-price="200"> </div> <div id="floor"> <img src="http://lorempixel.com/50/50/" class="pricetile" data-price="300"> <img src="http://lorempixel.com/50/50/" class="pricetile" data-price="400"> </div> <div id="energy"> <img src="http://lorempixel.com/50/50/" class="pricetile" data-price="500"> <img src="http://lorempixel.com/50/50/" class="pricetile" data-price="600"> </div> </div> <div id="price">total: $<span id="total">0.00</span></div> 

Answer 2

Try using data attribute and re-compute total on click:

 $(function() { $('img.select').on('click', function() { $(this).toggleClass('pick').siblings().removeClass('pick'); //remove previous selection var sum = 0.0; $('img.pick').each(function() { //loop all chosen sum += +($(this).data('price')); //note its parsing }); $('#total').text(sum.toFixed(2)); }); }); 

 img.select { /* to select */ cursor: pointer; padding: 5px; border: 1px solid #bbb; width: 35px; height: 35px; margin-bottom: 5px; } img.pick { /* chosen */ border-color: black; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div id="wrapper"> <div id="kitchen"> <img src="" data-price="1" class='select'> <img src="" data-price="2" class='select'> </div> <div id="floor"> <img src="" data-price="3" class='select'> <img src="" data-price="4" class='select'> </div> <div id="energy"> <img src="" data-price="5" class='select'> <img src="" data-price="6" class='select'> </div> </div> <div id="price">Total: $<span id="total">0.00</span> </div>