变量仅在函数中本地工作，而不是全局 - Javascript

Question

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

此示例是我正在处理的倒计时器的片段：

本地范围（功能运行）http://jsbin.com/leyicubegu/2/edit

function addTime() {

     var userTime = timeInput.value;
     var timeString = userTime.toString();
     var timeArray = timeString.split("");
     var hundrethsValue = timeArray[6].concat(timeArray[7]);
     var secondsValue = timeArray[3].concat(timeArray[4]);
     var minutesValue = timeArray[0].concat(timeArray[1]);

     var hundreths = hundrethsValue;
     var seconds = secondsValue;
     var minutes = minutesValue;    

document.getElementById("time").innerHTML = minutes + ":" + seconds + ":" + hundreths;

}

全球范围（功能不运行）http://jsbin.com/fuxexajozu/2/edit

var userTime = timeInput.value;
var timeString = userTime.toString();
var timeArray = timeString.split("");
var hundrethsValue = timeArray[6].concat( timeArray[7]);
var secondsValue = timeArray[3].concat(timeArray[4]);
var minutesValue = timeArray[0].concat(timeArray[1]);

var hundreths = hundrethsValue;
var seconds = secondsValue;
var minutes = minutesValue;  


function addTime() {

document.getElementById("time").innerHTML = minutes + ":" + seconds + ":" + hundreths;

}

通过变量功能（全球范围） - （功能不运行）

var userTime = timeInput.value;
var timeString = userTime.toString();
var timeArray = timeString.split("");
var hundrethsValue = timeArray[6].concat( timeArray[7]);
var secondsValue = timeArray[3].concat(timeArray[4]);
var minutesValue = timeArray[0].concat(timeArray[1]);

var hundreths = hundrethsValue;
var seconds = secondsValue;
var minutes = minutesValue;  


function addTime(minutes, seconds, hundreths) {


document.getElementById("time").innerHTML = minutes + ":" + seconds + ":" + hundreths;

}

*注意：运行功能仅在jsbin中运行，而不是在jsfiddle

中运行

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

HTML（如果需要）

<input id="timeInput" name="timeInput" type="text " length="20">

<h1><div id="time">00:00:00</div></h1>

<div id="result"></div>

<button onclick=addTime(); >Submit</button>

<button id="start" onclick = startClock();>Start</button>

<button id="stop" onclick="stopTimer();">Stop</button>

<button id="clear" onclick="resetTimer();">Reset</button>

Answer 1

我想那个

  

本地范围（功能运行）

点击所有值，因此每个局部变量都有实际值。

  

全球范围

所有变量都是在页面加载时定义的，并且具有空值。这些变量在整个页面生活中保持不变。每次点击“提交”时，每次都会读取相同的（旧）值

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

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

因为@Alnitak建议将事件处理程序定义从HTML页面移动到JS文件并使用局部变量要好得多：

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

Answer 2

两个问题：

---

变量值：userTime真的是你期望的那样吗？

第一个问题是，当页面加载并且输入字段为空时，您会立即读取输入值。你总是需要拥有最新的值，因此在调用addTime函数时你一定要阅读输入。

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

---

访问元素值 - 有风险的业务！

第二个问题将解释为什么您的代码在某些在线环境中工作而在其他环境中不起作用，这是您通常应该避免的。这就是这条线：

var userTime = timeInput.value;

这部分：timeInput.value取决于浏览器和范围上下文。浏览器我的意思是每个浏览器的JS实现 - 大多数都将按预期工作，并将名称元素打包为范围上下文属性（当然，除非它们被采用）。通常，这是window对象，但它并非必须如此。总是做这样的事情：

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

这里有一些关于这个特定问题的好答案：Do DOM tree elements with ids become global variables?。

---

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

<button onclick=addTime(); >

总是引用这些值，因为如果你没有（如果有空格等），你可能会遇到奇怪的问题，而且可能很难调试。所以，正确的方法是：

<button onclick="addTime();" >

或者更好的是，您使用addEventListener从JS中分配点击侦听器，而不是HTML标记，如下所示：

<button id="timeButton">

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