函数中未定义的全局变量

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（）时获取值，则应该获取变量。