toggleTest是一个函数：
function toggleTest() {
if(document.testRunning) {
stopTest();
} else {
startTest();
}
};
当我单击按钮时，我激活该行：
<input type="button" onclick="toggleTest()" id="toggleBtn" value="Stop Test" /><br />
并且出现错误
Uncaught ReferenceError: toggleTest is not defined我不明白为什么在定义函数的情况下出现错误。Demo jsFiddle
所有代码：
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas Drawing Speed Tests</title>
<script type="text/javascript">
window.onload=function(){
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
})();
window.cancelRequestAnimFrame = ( function() {
return window.cancelAnimationFrame ||
window.webkitCancelRequestAnimationFrame ||
window.mozCancelRequestAnimationFrame ||
window.oCancelRequestAnimationFrame ||
window.msCancelRequestAnimationFrame ||
clearTimeout
} )();
function toggleTest() {
if(document.testRunning)
{
stopTest();
}
else
{
startTest();
}
};
function changeTestType() {
stopTest();
startTest();
}
function startTest() {
if(toggleBtn == "Start Test"){
var radios = document.getElementsByName("testType");
for(var i = 0; i < radios.length; i++)
{
if(radios[i].checked == true)
{
document.testType = radios[i].id;
document.useRAF = true;
break;
}
}
if(document.useRAF){
document.testInterval = setInterval(function() {runTest();}, 1000/60);}
document.testRunning = true;
runTest();
}
}
function stopTest() {
if(!document.useRAF)
clearInterval(document.testInterval);
else
cancelRequestAnimFrame(document.requestAnimFrameId);
document.testRunning = false;
document.getElementById("toggleBtn").value = "Start Test";
}
function runTest() {
if(document.useRAF)
document.requestAnimFrameId = requestAnimFrame(runTest);
document.testType();
}
var ToggleBtn = document.getElementById("toggleBtn").value;
}
</script>
</head>
<body >
<div id="canvasContainer" style="position: relative;">
<canvas id="testCanvas" width="180" height="50" style="background-color:black">Sorry your browser doesn't support the HTML5 canvas!</canvas>
</div>
<div id="debugData" style="position: relative;">
<div id="debugControls" style="position:absolute;top:60px;left:0">
<form id="testForm">
<input type="button" onclick="toggleTest()" id="toggleBtn" value="Stop Test" /><br />
<label><input type="checkbox" id="rAF" onclick="changeTestType()" />Use requestAnimationFrame</label><br /><br />
<label><input type="radio" onchange="changeTestType()" name="testType" id="functionA" />functionA</label><br />
<label><input type="radio" onchange="changeTestType()" name="testType" id="functionB" />functionB</label><br />
<label><input type="radio" onchange="changeTestType()" name="testType" id="functionC" />functionC</label><br />
<label><input type="radio" onchange="changeTestType()" name="testType" id="functionD" />functionD</label><br />
</form>
</div>
</div>
</body>
</html>
最佳答案
因为您将代码放在window.onload中，该代码会在该函数范围内创建函数和toggleTest定义！只需将其移动到全局范围http://jsfiddle.net/TEt8R/1/
//change to be in body