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
– Vlad Tsepelev, Commented Dec 24, 2013 at 10:42
Similar problem explained here stackoverflow.com/questions/2485423/… — Vlad Tsepelev
– Vlad Tsepelev, Commented Dec 24, 2013 at 10:44
Error tells everything. Uncaught ReferenceError: totaal1 is not defined . Define it before you use it. — Airan
– Airan, Commented Dec 24, 2013 at 10:49

T.J. Crowder · Accepted Answer · 2013-12-24 10:50:42Z

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

Vaibhav Parmar · Accepted Answer · 2013-12-24 10:49:06Z

0

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

answered Dec 24, 2013 at 10:49

Vaibhav Parmar

6634 silver badges11 bronze badges

Comments

oxfn · Accepted Answer · 2013-12-24 11:00:26Z

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

Collectives™ on Stack Overflow

Return doesn't work javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related