Javascript 输入返回零

我试着自己做一些练习，将Jon Duckett的JavaScript和JQuery书中的元素与Treehouse的JavaScript基础曲目中的元素结合起来。基本上，该程序允许用户输入文本，并查看使用该文本制作标志的成本

当我尝试从输入元素复制文本并将其放置在自定义符号旁边时，我的input.value返回零。如果能帮上忙，我们将不胜感激

var btnCalc=document.getElementById（'myButton'）；
//这就是我的问题所在
var textInput=document.getElementById（'textInput'）。值；
var customSign=document.getElementById（'customSign'）；
var totalTiles=textInput.length；
var小计=totalTiles*5；
var=7；
var grandTotal=小计+装运；
btnCalc.addEventListener（'click'，Calculate'）；
函数计算（）{
//这里呢
document.getElementById（'customSign'）。innerHTML=textInput；
document.getElementById（'totalTiles'）。textContent=totalTiles；
document.getElementById（“小计”）.textContent=小计；
document.getElementById（'shipping'）。textContent=shipping；
document.getElementById（'grandTotal'）。textContent=grandTotal；
}

h2{
文本对齐：居中；
}
跨度{
字体大小：粗体；
}
div{
保证金：0自动；
宽度：400px；
溢出：自动；
}
保险商实验室{
列表样式类型：无；
}
#右柱{
浮动：对；
}
#左列{
浮动：左；
}
#输入表格{
文本对齐：居中；
}

Duckett第2章示例
你好，莫莉，请检查您的订单：

自定义标志：
瓷砖总数：
小计：
装运：
总计：


蒙塔古酒店
14
70美元
7美元
77美元

算计

变量必须在函数内部，否则调用函数时其值已经为空

var btnCalc=document.getElementById（'myButton'）； btnCalc.addEventListener（'click'，Calculate'）

---

将计算部分移动到函数

var btnCalc=document.getElementById（'myButton'）；
//这就是我的问题所在
var textInput=document.getElementById（'textInput'）；
var customSign=document.getElementById（'customSign'）；
btnCalc.addEventListener（'click'，Calculate'）；
函数计算（）{
var totalTiles=textInput.value.length；
var小计=totalTiles*5；
var=7；
var grandTotal=小计+装运；
//这里呢
document.getElementById（'customSign'）。innerHTML=textInput.value；
document.getElementById（'totalTiles'）。textContent=totalTiles；
document.getElementById（“小计”）.textContent=小计；
document.getElementById（'shipping'）。textContent=shipping；
document.getElementById（'grandTotal'）。textContent=grandTotal；
}

h2{
文本对齐：居中；
}
跨度{
字体大小：粗体；
}
div{
保证金：0自动；
宽度：400px；
溢出：自动；
}
保险商实验室{
列表样式类型：无；
}
#右柱{
浮动：对；
}
#左列{
浮动：左；
}
#输入表格{
文本对齐：居中；
}

Duckett第2章示例
你好，莫莉，请检查您的订单：

自定义标志：
瓷砖总数：
小计：
装运：
总计：


蒙塔古酒店
14
70美元
7美元
77美元

算计

Lixus是对的。您只需要将这5行从计算函数外部移动到计算函数内部。这是一把小提琴：谢谢！JavaScript中有没有定义全局变量的方法？我习惯于用Java编写，我假设变量可以被函数访问。变量可以在函数中访问，但由于函数外部变量的上下文以及调用后的上下文，您会出现一些逻辑错误。从技术上讲，这是您在代码中所做的，但是在脚本运行完成后，它们的值不会被保留，当您调用它们时，您必须在函数中再次设置它们。哦，我明白了。因此，当加载页面时，脚本将运行。单击按钮时，脚本再次运行，但只有事件侦听器运行，它无法知道存储在脚本第一部分中的变量。这接近正确吗？

function Calculate() {
  var textInput = document.getElementById('textInput').value;
  var customSign = document.getElementById('customSign');
  var totalTiles = textInput.length;
  var subtotal = totalTiles * 5;
  var shipping = 7;
  var grandTotal = subtotal + shipping;

  document.getElementById('customSign').innerHTML = textInput;
  document.getElementById('totalTiles').textContent = totalTiles;
  document.getElementById('subtotal').textContent = subtotal;
  document.getElementById('shipping').textContent = shipping;
  document.getElementById('grandTotal').textContent = grandTotal;
}