Question

我正在尝试使用javascript对按钮单击执行计算，因为我不希望在单击此按钮时刷新页面。我在下面写了一个脚本：

var name = document.getElementById('recipeName').value;
var lvl = document.getElementById('recipeLvl').value;
var e = document.getElementById("qualitySelect");
var quality = e.options[e.selectedIndex].value;
e = document.getElementById("classSelect");
var craft = e.options[e.selectedIndex].value;
var mat1 = document.getElementById('material1Name').value;
var mat1Qty = document.getElementById('material1Qty').value;
var mat1NQ = document.getElementById('material1NQ').value;
var mat1NQprice = document.getElementById('material1NQprice').value;
var mat1HQ = document.getElementById('material1HQ').value;
var mat1HQprice = document.getElementById('material1HQprice').value;
var mat2 = document.getElementById('material2Name').value;
var mat2Qty = document.getElementById('material2Qty').value;
var mat2NQ = document.getElementById('material2NQ').value;
var mat2NQprice = document.getElementById('material2NQprice').value;
var mat2HQ = document.getElementById('material2HQ').value;
var mat2HQprice = document.getElementById('material2HQprice').value;
var mat3 = document.getElementById('material3Name').value;
var mat3Qty = document.getElementById('material3Qty').value;
var mat3NQ = document.getElementById('material3NQ').value;
var mat3NQprice = document.getElementById('material3NQprice').value;
var mat3HQ = document.getElementById('material3HQ').value;
var mat3HQprice = document.getElementById('material3HQprice').value;
var mat4 = document.getElementById('material4Name').value;
var mat4Qty = document.getElementById('material4Qty').value;
var mat4NQ = document.getElementById('material4NQ').value;
var mat4NQprice = document.getElementById('material4NQprice').value;
var mat4HQ = document.getElementById('material4HQ').value;
var mat4HQprice = document.getElementById('material4HQprice').value;
var mat5 = document.getElementById('material5Name').value;
var mat5Qty = document.getElementById('material5Qty').value;
var mat5NQ = document.getElementById('material5NQ').value;
var mat5NQprice = document.getElementById('material5NQprice').value;
var mat5HQ = document.getElementById('material5HQ').value;
var mat5HQprice = document.getElementById('material5HQprice').value;
var mat6 = document.getElementById('material6Name').value;
var mat6Qty = document.getElementById('material6Qty').value;
var mat6NQ = document.getElementById('material6NQ').value;
var mat6NQprice = document.getElementById('material6NQprice').value;
var mat6HQ = document.getElementById('material6HQ').value;
var mat6HQprice = document.getElementById('material6HQprice').value;
e = document.getElementById("catalyst1");
var crystal1 = e.options[e.selectedIndex].value;
e = document.getElementById('element1');
var element1 = e.options[e.selectedIndex].value;
var crystal1Qty = document.getElementById('crystalQty1').value;
var crystal1Price = document.getElementById('crystalPrice1').value;
e = document.getElementById("catalyst2");
var crystal2 = e.options[e.selectedIndex].value;
e = document.getElementById('element2');
var element2 = e.options[e.selectedIndex].value;
var crystal2Qty = document.getElementById('crystalQty2').value;
var crystal2Price = document.getElementById('crystalPrice2').value;
var notes = document.getElementById('notes').value;
var marketPrice = document.getElementById('marketPrice').value;

function calculate() {
  var mat1Cost = (mat1NQ * mat1NQprice) + (mat1HQ * mat1HQprice);
  var mat2Cost = (mat2NQ * mat2NQprice) + (mat2HQ * mat2HQprice);
  var mat3Cost = (mat3NQ * mat3NQprice) + (mat3HQ * mat3HQprice);
  var mat4Cost = (mat4NQ * mat4NQprice) + (mat4HQ * mat4HQprice);
  var mat5Cost = (mat5NQ * mat5NQprice) + (mat5HQ * mat5HQprice);
  var mat6Cost = (mat6NQ * mat6NQprice) + (mat6HQ * mat6HQprice);
  var crystal1Cost = (crystal1Qty * crystal1Price);
  var crystal2Cost = (crystal2Qty * crystal2Price);
  var total = mat1Cost +
    mat1Cost +
    mat1Cost +
    mat1Cost +
    mat1Cost +
    mat1Cost +
    crystal1Cost +
    crystal2Cost;
  document.getElementById('totalCost').value = mat1Cost;
  return false;
}

我是javascript的新手，并且认为之后声明变量会让任何我需要使用它们的函数都可以访问它们，但是它们在calculate函数中是未定义的。如果我在calculate（）中声明它们没问题，那么这是一个范围问题吗？

提前感谢您的帮助！

Answer 1

问题是你在为它们分配任何内容之前抓取元素值。您正在获取副本，而不是参考。

var initialValue = document.getElementById('text').value;

function clickHandler() {
  // Notice how I have to grab the value again when I want an updated value
  var updatedValue = document.getElementById('text').value;
  console.log('Initial:', initialValue);
  console.log('Updated:', updatedValue);
}

<input id="text" />
<button onclick="clickHandler()">Click Me</button>

Answer 2

@epascarello评论了真正的答案，那里没有太多科学，这是javascript，因此是一种脚本语言，所以只要加载这个文件，那些变量就会填充每个字段的初始数据，所以，如果你想在你按calculate（）的那一点得到值，你应该得到你的变量。

函数中未定义的全局变量

2 个答案: