CODEWITHSUNDEEP
javascripthtmlfunctionvar
qweqweqweqwe
qweqweqweqwe

Reputation: 3

getting variables on function

im kinda working on making my own website but in just giving some functions im already struggling...this website is an online food ordering.i need to get the sum of foods...but i cannot make the values come out of the functions even i use return... someone help me with this? im not that good at javascript yet i just studied 2days ago

here is my current work...

$('#jollyoption').click(function(totalchicken){   
  var e = document.getElementById("jollyoption");
  var chicken = e.options[e.selectedIndex].value;      
  var totalchicken = chicken;

  chicken = parseInt(chicken);    

  document.getElementById("demo").innerHTML = totalchicken;

  return totalchicken;
});

$('#jollyoption1').click(function(totalburger){
  var a = document.getElementById("jollyoption1");
  var burger = a.options[a.selectedIndex].value;
  var totalburger = burger;

  burger = parseInt(burger); 

  document.getElementById("demo1").innerHTML = totalburger;

  return totalburger;
});

$('#jollyoption2').click(function(totalfries){
  var a = document.getElementById("jollyoption2");
  var fries = a.options[a.selectedIndex].value;   
  var totalfries = fries;

  fries = parseInt(fries);

  document.getElementById("demo2").innerHTML = totalfries;

  return totalfries;
});

var total =totalfries+totalburger+totalchicken;

document.getElementById("demo3").innerHTML = total;

if you have time to run it... everytime i place the quantity of orders of the 1 one the 4 restaurants (choose the jollibee PS:not editing other resto yet) i get that NaN because i cannot get the variables and their values back at the main body so i could just add the total and just print them out.can someone help me with this problem? thankyou in advance

Upvotes: 0

Views: 77

Answers (3)

Snowmonkey
Snowmonkey

Reputation: 3761

Rather than binding to a given id, which is really not extensible, here's your same code simplified. Changing ANY select will call the event listener and recalculate the total, and it's limiting what is called to ONLY the current selects own siblings. Hope it helps!

$(document).ready(main());


function main() {
  var totalchicken, totalburger, totalfries;
  $('.targetDiv').hide();
  $('.show').click(function() {
    $('.targetDiv').hide();
    $('#div' + $(this).attr('target')).show();
  });

  $('.hide').click(function() {
    $('#div' + $(this).attr('target')).hide();
  });

  $("select").on("change", function() {
    var subTotal = 0;
    var selectList = $(this).parent().find("select");
    selectList.each(function() {
      var thisItemCost = parseInt($(this).find(":selected").attr("value"));
      subTotal += thisItemCost;
    })

    $(".totalCost").text("Your Order Total: $" + subTotal);
  });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>
  Online Ordering Website Fast Food Edition!
</h1>
<div class="buttons">
  <input type="radio" name="resto" class="show" target="1">Jollibee
  <input type="radio" name="resto" class="show" target="2">Mc Donalds
  <input type="radio" name="resto" class="show" target="3">KFC
  <input type="radio" name="resto" class="show" target="4">Burger King
</div>

<div id="div1" class="targetDiv">
  <h4>
    Jollibee Meals!
  </h4>
  <input type="checkbox">Chicken
  <strong>98 Pesos</strong>
  <select id="jollyoption">
    <option value="0"> </option>
    <option value="98">1</option>
    <option value="196">2</option>
    <option value="294">3</option>
    <option value="392">4</option>
    <option value="490">5</option>
  </select>
  <output id="demo"></output>
  <br>
  <input type="checkbox">Burger
  <strong>130 Pesos</strong>
  <select id="jollyoption1" onclick="">
    <option value="0"> </option>
    <option value="130">1</option>
    <option value="260">2</option>
    <option value="390">3</option>
    <option value="520">4</option>
    <option value="650">5</option>
  </select>
  <output id="demo1"></output>
  <br>
  <input type="checkbox">Fries
  <strong>60 Pesos</strong>
  <select id="jollyoption2">
    <option value="0"> </option>
    <option value="60">1</option>
    <option value="120">2</option>
    <option value="180">3</option>
    <option value="240">4</option>
    <option value="300">5</option>
  </select>
  <output id="demo2"></output>
  <br>
  <p id="demo3"></p>
</div>
<div id="div2" class="targetDiv">
  <h4>
    Mc Donald Meals!
  </h4>
  <input type="checkbox">Chicken
  <strong>79 Pesos</strong>
  <select id="mcDoption1">
    <option value="0"> </option>
    <option value="79">1</option>
    <option value="158">2</option>
    <option value="237">3</option>
    <option value="316">4</option>
    <option value="395">5</option>
  </select>
  <br>
  <input type="checkbox" id="enable2">Burger
  <strong>50 Pesos</strong>
  <select id="mcDoption2">
    <option value="0"> </option>
    <option value="50">1</option>
    <option value="100">2</option>
    <option value="150">3</option>
    <option value="200">4</option>
    <option value="250">5</option>
  </select>
  <br>
  <input type="checkbox">Fries
  <strong>39 Pesos</strong>
  <select id="mcDoption3">
    <option value="0"> </option>
    <option value="39">1</option>
    <option value="78">2</option>
    <option value="117">3</option>
    <option value="156">4</option>
    <option value="195">5</option>
  </select>
  <br>
</div>


<div id="div3" class="targetDiv">
  <h4>
    KFC Meals!
  </h4>
  <input type="checkbox" id="enable">Chicken
  <strong>100 Pesos</strong>
  <select id="kfcoption1">
    <option value="0"> </option>
    <option value="100">1</option>
    <option value="200">2</option>
    <option value="300">3</option>
    <option value="400">4</option>
    <option value="500">5</option>
  </select>
  <br>
  <input type="checkbox" id="enable2">Burger
  <strong>65 Pesos</strong>
  <select id="kfcoption2">
    <option value="0"> </option>
    <option value="65">1</option>
    <option value="130">2</option>
    <option value="195">3</option>
    <option value="260">4</option>
    <option value="320">5</option>
  </select>
  <br>
  <input type="checkbox">Fries
  <strong>35 Pesos</strong>
  <select id="kfcoption3">
    <option value="0"> </option>
    <option value="35">1</option>
    <option value="70">2</option>
    <option value="105">3</option>
    <option value="140">4</option>
    <option value="175">5</option>
  </select>
  <br>
</div>


<div id="div4" class="targetDiv">
  <h4>
    Burger King Meals!
  </h4>
  <input type="checkbox" id="enable">Chicken
  <strong>149 Pesos</strong>
  <select id="bkoption1">
    <option value="0"> </option>
    <option value="149">1</option>
    <option value="298">2</option>
    <option value="447">3</option>
    <option value="596">4</option>
    <option value="745">5</option>
  </select>
  <br>
  <input type="checkbox" id="enable2">Burger
  <strong>110 Pesos</strong>
  <select id="bkoption2">
    <option value="0"> </option>
    <option value="110">1</option>
    <option value="220">2</option>
    <option value="330">3</option>
    <option value="440">4</option>
    <option value="550">5</option>
  </select>
  <br>

</div>
<div class="totalCost">

</div>

Upvotes: 0

Karl Reid
Karl Reid

Reputation: 2217

Your code for computing the total was only executed once, at page load, when none of the values were set, and then never again.

I updated your code : https://jsfiddle.net/uadtscxj/14/

I just added a subtotal function that computes the current total, and then call that in your event handling functions, so the total updates multiple times.

function subtotal(){
    var totalchicken =
        (parseInt(document.getElementById("demo").innerHTML) || 0);
    var totalburger =
        (parseInt(document.getElementById("demo1").innerHTML) || 0);
    var totalfries =
        (parseInt(document.getElementById("demo2").innerHTML) || 0);
    var total = 
        totalchicken + totalburger + totalfries
    document.getElementById("demo3").innerHTML = total;
}

Upvotes: 0

Tricky12
Tricky12

Reputation: 6822

There's a couple of things you can do to get this working. First, you need to make your 3 total variables global variables. Once you do that, you can create a function that updates the total, and call it each time you want the total updated. Currently, this is where all of your return statements are.

This should be the top of your javascript.

var totalchicken = 0,
  totalburger = 0,
  totalfries = 0;

(document).ready(main());

function updateTotal() {
  var total = totalfries + totalburger + totalchicken;
  document.getElementById("demo3").innerHTML = total;
}

You can replace your return statements with a call to the updateTotal function.

updateTotal();
//return totalchicken;

Updated Fiddle

Upvotes: 1

Related Questions