Return doesn't work javascript

Question

my return var doesn't want to return. What do i do wrong? i get this error in the console:

Uncaught ReferenceError: totaal1 is not defined .

var $ = function (id) {
    return document.getElementById(id);
}
$("totaalprijs").innerHTML = totaal1 + totaal2;
$("gerecht1").onchange = function () {
    var aantal = $("gerecht1").value;
    var prijs = 7.9;
    console.log(aantal);
    totaal1 = aantal * prijs;
    return totaal1;
}
$("gerecht2").onchange = function () {
    var aantal = $("gerecht2").value;
    var prijs = 9.9;
    console.log(aantal);
    totaal2 = aantal * prijs;
    return totaal2;
}

Use variable declaration like: "var totaal1" instead of just "totaal1" — Vlad Tsepelev, Dec 24 '13 at 10:42
Similar problem explained here http://stackoverflow.com/questions/2485423/javascript-is-using-var-to-declare-variables-optional — Vlad Tsepelev, Dec 24 '13 at 10:44
Error tells everything. Uncaught ReferenceError: **totaal1 is not defined .** Define it before you use it. — Airan, Dec 24 '13 at 10:49

T.J. Crowder · Accepted Answer · 2013-12-24T10:50:42.020

On this line:

$("totaalprijs").innerHTML = totaal1 + totaal2;

...you're trying to use a variable, totaal1, that isn't declared anywhere. Hence the ReferenceError, if you try to read the value of a variable that isn't declared, it causes that error.

To fix it, declare the variable (and ideally assign it a meaningful value), or don't use it in that calculation. (And then do the same for totaal2, because it doesn't seem to be declared anywhere, either.)

Now, the fun thing here is that if the change event fires on gerecht1 and gerecht2, totaal1 and totaal2 will get implicitly created as global variables, via The Horror of Implicit Globals. But because those change handlers aren't attached until after the code causing the problem, they never get attached, because of the error.

FWIW, I think you probably wanted something like this:

var totaal1 = 0, totaal2 = 0;
var $ = function (id) {
    return document.getElementById(id);
};
var updateTotaalPrijs = function() {
  $("totaalprijs").innerHTML = totaal1 + totaal2;
};
updateTotaalPrijs();
$("gerecht1").onchange = function () {
    var aantal = parseFloat($("gerecht1").value); // Or possibly `parseInt(..., 10)`
    var prijs = 7.9;
    console.log(aantal);
    totaal1 = aantal * prijs;
    updateTotaalPrijs();
};
$("gerecht2").onchange = function () {
    var aantal = parseFloat($("gerecht2").value); // Or possibly `parseInt(..., 10)` 
    var prijs = 9.9;
    console.log(aantal);
    totaal2 = aantal * prijs;
    updateTotaalPrijs();
};

And also FWIW, I would suggest using function declarations most of the time, and wrapping everything to avoid creating globals:

(function() {
  var totaal1 = 0, totaal2 = 0;

  function $(id) {
      return document.getElementById(id);
  }

  function updateTotaalPrijs() {
    $("totaalprijs").innerHTML = totaal1 + totaal2;
  }

  updateTotaalPrijs();

  $("gerecht1").onchange = function () {
      var aantal = parseFloat($("gerecht1").value); // Or possibly `parseInt(..., 10)`
      var prijs = 7.9;
      console.log(aantal);
      totaal1 = aantal * prijs;
      updateTotaalPrijs();
  };
  $("gerecht2").onchange = function () {
      var aantal = parseFloat($("gerecht2").value); // Or possibly `parseInt(..., 10)` 
      var prijs = 9.9;
      console.log(aantal);
      totaal2 = aantal * prijs;
      updateTotaalPrijs();
  };
})();

score 0 · Answer 2 · answered Dec 24 '13 at 10:49

you have to declare totaal1 and totaal2 variable so try below code:

 var totaal1=0,totaal2=0;
 var $ = function (id) 
 {
     return document.getElementById(id);
 }
 $("totaalprijs").innerHTML = totaal1 + totaal2;
 $("gerecht1").onchange = function () 
 {
    var aantal = $("gerecht1").value;
    var prijs = 7.9;
    console.log(aantal);
    totaal1 = aantal * prijs;
    return totaal1;
  }
 $("gerecht2").onchange = function () 
 {
    var aantal = $("gerecht2").value;
    var prijs = 9.9;
    console.log(aantal);
    totaal2 = aantal * prijs;
    return totaal2;
 }

score 0 · Answer 3 · answered Dec 24 '13 at 11:00

In line

$("totaalprijs").innerHTML = totaal1 + totaal2;

you're trying to access global variables totaal1 and totaal2, which are local to event handlers functions. The handler return value is purposed for internal DOM event processing and not working this way.

What you want is to update #totaalprijs, when gerecht1 and gerecht2 are updated, so you better to create common onchange handler, which will do all calculations

var $ = function(id) {
    return document.getElementById(id);
}

// Common change handler
function calc(e) {
   var aantal1 = $("gerecht1").value,
       aantal2 = $("gerecht2").value,
       prijs1 = 7.9,
       prijs2 = 9.9,
       total = aantal1 * prijs1 + aantal2 * prijs2;
   $("totaalprijs").innerHTML = total;
}
$("gerecht1").onchange = calc;
$("gerecht2").onchange = calc;
calc(); // Call on load, to calculate on initial values

Return doesn't work javascript

3 Answers3