Javascript 函数中未定义的全局变量

我正在尝试使用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新手，我认为在javascript之后声明变量将使我需要在其中使用它们的任何函数都可以访问它们，但它们在calculate函数中没有定义。如果我在calculate（）中声明它们，那么这是一个范围问题吗

---

提前感谢您的帮助

问题在于，在为元素分配任何内容之前，您正在获取元素值。你得到的是一份副本，不是推荐信

var initialValue=document.getElementById（'text'）.value；
函数clickHandler（）{
//请注意，当我需要更新的值时，我必须再次获取该值
var updatedValue=document.getElementById（'text'）.value；
log（'Initial:'，initialValue）；
log（'Updated:'，updatedValue）；
}

单击我

@epascarello已经对真实答案进行了注释，这里没有太多的科学知识，这是javascript，因此是一种脚本语言，因此一旦加载此文件，这些变量将填充每个字段的初始数据，因此，如果您想在按下calculate（）时获取值，您应该获取变量。

请在调用函数时/在何处提供html？您是否意识到这些值是在脚本运行时记录的，而不是在调用函数时记录的。当输入值更改时，变量中的值不会自动更新。您将此代码放在何处，以及

calculate（）

在何处？如果在使用

getElementById

之前没有等待页面加载，它找不到任何元素。我正在用一个按钮中的onclick调用函数：所以发生的是，我的函数正在运行，但脚本没有给函数外部的变量赋值？@Rwarfield问题是，当你第一次加载页面时，这些元素没有任何值。您需要填写它们，然后稍后获取值。就像你问我要一个汉堡，我说“我现在没有。”如果你晚些时候问我要一个汉堡，我可能会给你一个，但你必须再问我一次。我不会告诉你我有一个汉堡是自动的。好吧，我想我现在明白了，它是在第一次加载页面，所有输入都是空的，或者脚本在加载页面时运行的时候给那些值赋值。因此，在单击按钮时，我必须声明变量以再次获取值。我必须在函数中声明它们，有没有办法再次运行整个脚本？我试图不必在我需要的每个函数中声明变量，而是只声明一次。@Rwarfield您不必重新声明它们，但必须重新分配它们。您可以编写一个函数来重新分配它们并调用它。