getting variables on function

Question

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

The code in your link has an error- you need $ at the very start, for $(document).ready(main()). — Karl Reid
– Karl Reid, Commented Apr 21, 2017 at 19:46
1. You will not be able to access the variables defined inside functions from outside. Variables should be outside. 2. Code in main body is actually run only once unless you schedule it or add in form of a listener. — M. Prokhorov
– M. Prokhorov, Commented Apr 21, 2017 at 19:47
i already made the variables outside but the numbers that i compute inside the function dont go out even i use return... do you have a bettery logic flow that can share to me — qweqweqweqwe
– qweqweqweqwe, Commented Apr 21, 2017 at 19:59

Tricky12 · Accepted Answer · 2017-04-21 20:09:35Z

1

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

answered Apr 21, 2017 at 20:09

Tricky12

6,8301 gold badge30 silver badges36 bronze badges

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

3 Comments

Karl Reid Over a year ago

Damn, same solution I posted, I was just a bit too late.. Yours is better though, you can just use the global total vars, I read them from the DOM every time.

Asons Over a year ago

@Vnzlrnz It is not recommended to pollute the global scope with a lot of variables, check this post: stackoverflow.com/a/43480517/2827823

qweqweqweqwe Over a year ago

im sorry im still learning java script...but im working on it!

Karl Reid · Accepted Answer · 2017-04-21 20:10:18Z

0

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

answered Apr 21, 2017 at 20:10

Karl Reid

2,2671 gold badge12 silver badges18 bronze badges

1 Comment

qweqweqweqwe Over a year ago

thankyou with this,im sorry haha im just building from scraps that i learned few days ago...

Snowmonkey · Accepted Answer · 2017-04-21 20:14:28Z

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>

Collectives™ on Stack Overflow

getting variables on function

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related