javascript - 返回不起作用的JavaScript

我的return var不想返回。我做错了什么？我在控制台中收到此错误：


  未捕获ReferenceError：未定义totaal1。

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

最佳答案

在这行上：

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

...您正在尝试使用未在任何地方声明的变量totaal1。因此，ReferenceError如果尝试读取未声明的变量的值，则会导致该错误。

要对其进行修复，请声明该变量（并在理想情况下为其分配一个有意义的值），或者不要在该计算中使用它。 （然后对totaal2执行相同的操作，因为它似乎也未在任何地方声明。）

现在，有趣的是，如果change事件在gerecht1和gerecht2上触发，则totaal1和totaal2将通过The Horror of Implicit Globals隐式创建为全局变量。但是由于这些更改处理程序要等到导致问题的代码之后才附加，所以由于错误，它们永远不会附加。

FWIW，我想您可能想要这样的东西：

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

还有FWIW，我建议大多数时候都使用函数声明，并包装所有内容以避免创建全局变量：

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

关于javascript - 返回不起作用的JavaScript，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20759416/