返回不起作用的JavaScript

Question

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

Answer 1

在這行上：

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

...您正在嘗試使用未在任何地方聲明的變量totaal1 。 因此， ReferenceError ，如果您嘗試讀取未聲明的變量的值，則會導致該錯誤。

要修復該問題，請聲明該變量（並在理想情況下為其分配一個有意義的值），或者不要在該計算中使用它。 （然后對totaal2進行相同的totaal2 ，因為它似乎也未在任何地方聲明。）

現在，有趣的是，如果change事件在gerecht1和gerecht2上gerecht1 ，則totaal1和totaal2將通過“隱式全局變量的恐怖”隱 式創建為全局變量。 但是因為這些更改處理程序直到導致問題的代碼之后才附加，所以由於錯誤，它們永遠不會附加。

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

Answer 2

您必須聲明totaal1和totaal2變量，因此請嘗試以下代碼：

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

Answer 3

排隊

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

您正在嘗試訪問事件處理程序函數局部的全局變量totaal1和totaal2 。 處理程序返回值旨在用於內部DOM事件處理，並且不能以此方式工作。

您想要的是在gerecht1和gerecht2更新時更新#totaalprijs ，因此最好創建通用的onchange處理程序，該處理程序將進行所有計算

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