JS 代码在 jsbin 中工作，而不在 jsfiddle 或 Chrome/Safari 中工作？答案

【问题标题】：JS Code Works in jsbin and Not in jsfiddle or Chrome/Safari?JS 代码在 jsbin 中工作，而不在 jsfiddle 或 Chrome/Safari 中工作？
【发布时间】：2015-06-06 21:23:38
【问题描述】：

我试图弄清楚为什么这段代码只能在 jsbin 中工作，而不能在 jsfiddle 或任何 Web 浏览器中作为 html/js 文件工作。我试过调试，但找不到结论。

我犯了直接在 jsbin 中而不是在文档中编码的错误。任何输入将不胜感激。

http://jsbin.com/tuduxedohe/7/edit
http://jsfiddle.net/2rs1x5pz/

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Timer</title>
  <script type="text/javascript" src="part2.js"></script>
</head>
<body>

<h1><div id="time">00:00:00</div></h1>
<div id="result"></div>
<button id="start" onclick ="startClock();" >Start</button>
<button id="stop" onclick="stopTimer();">Stop</button>
<button id="clear" onclick="resetTimer();">Reset</button>

</body>
</html>

var currentTime = document.getElementById('time');

var hundreths = 0;
var seconds = 0;
var minutes = 0;
var t;

function startClock() {
function add() {



    hundreths++;
    if (hundreths > 99) {
        hundreths = 0;
        seconds++;
        if (seconds > 59) {
            seconds = 0;
            minutes++;
        }
        if(minutes >= 10) {
            seconds= 0;
            minutes= 0;
            stopTimer();

        }
    }



if (hundreths > 9 && seconds < 9) {
currentTime.innerHTML = "0" + minutes + ":" + "0" + seconds + ":" + hundreths;
  }
else if ((seconds > 9 ) && (hundreths < 9)) {
currentTime.innerHTML = "0" + minutes + ":" + seconds + ":" + "0" + hundreths;
}
else if((seconds > 9) && (hundreths > 9)) {
currentTime.innerHTML = "0" + minutes + ":" + seconds + ":" + hundreths;
}
else if ((minutes > 9) && (seconds < 9) && (hundreths < 9)) {
currentTime.innerHTML = minutes + ":" + "0" + seconds + ":" + "0" + hundreths;
}

else if ((minutes > 9) && (seconds > 9) && (hundreths < 9)) {
currentTime.innerHTML = minutes + ":" + seconds + ":" + "0" + hundreths;
}

else if ((minutes > 9) && (seconds > 9) && (hundreths < 9)) {
currentTime.innerHTML = minutes + ":" + seconds + ":" + hundreths;
}

else {
currentTime.innerHTML = "0" + minutes + ":" + "0" + seconds + ":" + "0" + hundreths;
}

   timer();
}


function timer() {
    t = setTimeout(add, 1);
}
timer();
} // end function start clock

function stopTimer() {
    document.getElementById("result").innerHTML = "<p>" + ("Your time is: " + minutes + " minutes, " + seconds + " seconds, " + "and " + hundreths + " hundreths") + "</p>";
    clearTimeout(t);
}

function resetTimer() {
  hundreths = 0; 
  seconds = 0; 
  minutes = 0;   

  currentTime.innerHTML = "00:00:00";
}

【问题讨论】：

标签： javascript debugging jsbin

【解决方案1】：

这是因为默认情况下，脚本被添加到 jsfiddle 的 onload 处理程序中，因此您的方法仅在该闭包范围内可用。所以会是

window.onload=function(){
    //your script is here
}

当您尝试从on<event>="" 属性调用它们时，您正尝试在全局范围内访问它们，这将在您的控制台中给出类似Uncaught ReferenceError: startClock is not defined 的错误。

将左侧面板中Frameworks & Extensions 下的第二个下拉菜单更改为小提琴左侧面板中的 body/head 以添加没有包装函数的脚本

演示：Fiddle

【讨论】：

谢谢阿伦！如果您不介意我问，当我将代码添加到 .html 和 .js 文件时，它是否也在 onload 函数的范围内？它在没有 onload 事件的情况下在 jsfiddle 中工作。如何将它应用到我在网络浏览器中运行的 html/js 文件？
另外，您是如何发现错误的：Uncaught ReferenceError: startClock is not defined？你用过代码调试器吗？
@isha 不，它不在 onload 处理程序的范围内，除非你在这个小提琴中拥有它 - jsfiddle.net/arunpjohny/rw5pbduh/2