Question

所以我有这个代码可以计算产品的总价。然而，它只显示应该添加到价格中的最后一个附加价值。

window.onload = function() {
  var dig_print = 0
  var up_op = 0
document.querySelector("#div1").onclick = function() {
  var dig_print = 1
  var total = up_op + dig_print
  document.getElementById("price").innerHTML = total
  }

document.querySelector("#div2").onclick = function() {
  var dig_print = 2
  var total = up_op + dig_print;
  document.getElementById("price").innerHTML = total
  }
document.querySelector("div.3").onclick = function() {
  var up_op = 10
  var total = up_op + dig_print
  document.getElementById("price").innerHTML = total
  }
document.querySelector("div.4").onclick = function() {
  var up_op = 20
  var total = up_op + dig_print
  document.getElementById("price").innerHTML = total
  }
}

Answer 1

首先，var total应声明为全局var（请参阅下面的代码段）。另外，请勿在函数正文中声明up_op（即从每个函数中删除var前面的up_op）：

window.onload = function() {
  var dig_print = 0;
  var up_op = 0;
  var total = 0;
// the rest of your code

这将解决您所描述的问题。

Answer 2

不要在函数中再次声明total，应该修复它。

如果在函数中定义名为total的变量，则它是一个不同的变量，其范围仅限于该函数。

同样，您的dig_print和up_op变量都被多次声明。

您尝试向全局定义的total变量添加值，而实际上您创建了多个本地副本，其范围仅限于最终显示的那些功能

另请参阅Demystifying JavaScript Variable Scope and Hoisting

上的这篇优秀文章

window.onload = function() {
  var dig_print = 0;
  var up_op = 0;
var total = 0;
document.querySelector("#div1").onclick = function() {
  //var dig_print = 1// why declare this again ??
  total = up_op + dig_print
  document.getElementById("price").innerHTML = total
  }

document.querySelector("#div2").onclick = function() {
  //dig_print = 2 // why declare this ??
  total = up_op + dig_print;
  document.getElementById("price").innerHTML = total
  }
document.querySelector("div.3").onclick = function() {
  //up_op = 10;// why declare this ??
  total = up_op + dig_print
  document.getElementById("price").innerHTML = total
  }
document.querySelector("div.4").onclick = function() {
  //up_op = 20// why declare this ??
  total = up_op + dig_print
  document.getElementById("price").innerHTML = total
  }
}

无法获得要添加的变量

2 个答案: