变量只在函数中局部工作，而不是全局工作-Javascript

我以前在另一个项目中遇到过这个问题。当我将变量包含在具有局部作用域的函数中时，该函数能够运行。当我将变量置于全局范围为的函数之外时，函数不会解释变量，也不会运行。我尝试将全局变量传递到我的函数中，但它没有运行

此示例是我正在使用的倒计时计时器的一个片段：

本地作用域（函数运行）

全局作用域（函数不运行）

将变量传递给函数（全局范围）-（函数不运行）

*注意：running函数只在jsbin中运行，而不是在jsfiddle中运行

我无法确定为什么变量只在局部范围内运行。我希望它们在全局范围内运行，以便我可以在多个函数中使用它们。请提供任何意见。我是新手，所以我对范围的了解有限

HTML（如果需要）

00:00:00
提交
开始
停止
重置

我想

本地作用域（函数运行）

所有的值都是点击得到的，所以每个局部变量都有实际值

全球范围

所有变量都是在页面加载时定义的，并且具有空值。这些变量在整个页面生命周期中保持不变。每次单击Submit都会读取相同的（旧）值

无论如何，避免使用全局变量。他们会让你的生活在未来变得更糟

在您的情况下，我根本看不到使用这些全局变量的原因，因为它们应该在单击按钮时具有实际值

因此，正如@Alnitak所建议的，最好将事件处理程序定义从HTML页面移动到JS文件，并使用局部变量：

document.getElementById("mySubmitButton").onclick = function addTime() {
     var userTime = timeInput.value;
     var timeString = userTime.toString();
     ...
     document.getElementById("time").innerHTML = minutes + ":" + seconds + ":" + hundreths;
}

两个问题：

---

变量值：

userTime

真的是您所期望的吗？ 第一个问题是，当页面加载并且输入字段为空时，您就会读取输入值。您始终需要有最新的值，因此在调用

addTime

函数时一定要读取输入

如果您愿意，您仍然可以保持变量的全局性，但是您必须在需要时读取输入

---

访问元素值-风险业务！ 第二个问题将解释为什么您的代码在某些在线环境中工作而在其他环境中不工作，这是您通常应该避免的。是这样的：

var userTime = timeInput.value;

此部分：

timeInput.value

取决于浏览器和作用域上下文。我所说的浏览器是指每个浏览器的JS实现——它们中的大多数都将按预期工作，并将名称元素打包为范围上下文属性（当然，除非采用它们）。通常，这是

窗口

对象，但不必如此。请始终这样做：

var userTime = document.getElementById('timeInput').value;

关于这个具体问题，这里有一些很好的答案：

---

另一件需要注意的事情是引用HTML元素属性值。例如，在这里：

<button onclick=addTime(); >

---

认真地说，让它们像在本地函数中一样工作，并使用适当的DOM3

addEventListener

调用来注册它们，而不是使用内联DOM0事件处理程序。这就是我们在90年代编写JS代码的方式。感谢您的输入@Alnitak。正如我所提到的，我对这一点还不熟悉，还没有做到这一点。jsbin/jsfiddle链接会很有帮助。@Shomz我已经添加了链接。谢谢，谢谢。我切换了它，这样所有的onclick函数都可以在JS.wow中调用……看起来我错过了很多。谢谢你指出错误

document.getElementById("mySubmitButton").onclick = function addTime() {
     var userTime = timeInput.value;
     var timeString = userTime.toString();
     ...
     document.getElementById("time").innerHTML = minutes + ":" + seconds + ":" + hundreths;
}

var userTime = timeInput.value;

var userTime = document.getElementById('timeInput').value;

<button onclick=addTime(); >

<button onclick="addTime();" >

<button id="timeButton">

var timeButton = document.getElementById('timeButton');
timeButton.addEventListener('click', addTime);