Browser Says Function is not Defined (But it is)
What's wrong with this code? The HTML validates, but the JavaScript still won't work. Says timekey is undefined whenever a button is clicked.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />开发者_运维技巧
<style type="text/css">
.numBtn { width: 100px;}
#microwave_oven{ position: relative;}
#microwave_screen img{ visibility: hidden;}
#microwave_screen{position: absolute; top: 100px; left: 100px;}
#keypad{position: absolute; top: 0px; left: 750px; width: 300px;}
#screen {position: absolute; top: 0px; left: 70px;}
#buttons {position: absolute; top: 50px; left: 0px;}
</style>
<title>Microwave Oven</title>
<script type="javascript">
<!--
//Variables
var timestring = '';
function timekey(numkey)
{
if (timestring.length >4)
{
}
else
{
timestring += numkey;
dispTime();
}
}
function dispTime()
{
//This to display the number
document.getElementById("timekey").value=timestring;
}
//-->
</script>
</head>
<body>
<div id="microwave_oven">
<!--This is for the entire microwave-->
<span id="microwave_back">
<img src="final_micro.jpg" alt="final micro"/>
</span>
<!--Screen where the light up image goes and it will be hidden-->
<span id="microwave_screen">
<!--This is where screen would light up while i(n use-->
<img src="window.jpg" id="scrnimg" alt="window" />
</span>
<div id="keypad">
<!--This is the textbox where output of numbers are displayed-->
<div id="screen">
<input type="text" id="textbox" />
</div>
<div id="buttons">
<table>
<tr><td><input type="button" id="popcorn" class="numBtn" value="Popcorn" onclick="timekey('50')" /></td>
<td><input type="button" id="poultry" class="numBtn" value="Poultry" onclick="timekey('50')" /></td>
<td><input type="button" id="pizza" class="numBtn" value="Pizza" onclick="timekey('50')" /></td></tr>
<tr><td><input type="button" id="frozen_entree" class="numBtn" value="Frozen entree" onclick="timekey('50')" /></td>
<td><input type="button" id="baked_goods" class="numBtn" value="Baked goods" onclick="timekey('50')" /></td>
<td><input type="button" id="beverage" class="numBtn" value="Beverage" onclick="timekey('50')"/></td></tr>
<tr><td><input type="button" id="i" class="numBtn" value="1" onclick="timekey('1')" /></td>
<td><input type="button" id="ii" class="numBtn" value="2" onclick="timekey('2')" /></td>
<td><input type="button" id="iii" class="numBtn" value="3" onclick="timekey('3')" /></td></tr>
<tr><td><input type="button" id="iv" class="numBtn" value="4" onclick="timekey('4')" /></td>
<td><input type="button" id="v" class="numBtn" value="5" onclick="timekey('5')" /></td>
<td><input type="button" id="vi" class="numBtn" value="6" onclick="timekey('6')" /></td></tr>
<tr><td><input type="button" id="vii" class="numBtn" value="7" onclick="timekey('7')" /></td>
<td><input type="button" id="viii" class="numBtn" value="8" onclick="timekey('8')" /></td>
<td><input type="button" id="ix" class="numBtn" value="9" onclick="timekey('9')" /></td></tr>
<tr><td><input type="button" id="clear" class="numBtn" value="Stop/Clear" onclick="timekey('50')" /></td>
<td><input type="button" id="zero" class="numBtn" value="0" onclick="timekey('0')" /></td>
<td><input type="button" id="Start" class="numBtn" value="Start" onclick="timekey('50')"/></td></tr>
</table>
</div>
</div>
</div>
</body>
</html>
Uncaught ReferenceError: timekey is not defined (anonymous function)dreamweaver.html:87 onclickdreamweaver.html:88
mistake in script type:
<script type="text/javascript">
You have to wait for the entire DOM to load.
Look at these lines in your code. You have all your script commented out.
<script type="javascript">
<!--
...
//-->
Dmitriy is correct your script type is inaccurate it should be type="text/javascript"
try this >
var timekey = function (numkey)
{
if (timestring.length >4)
{
}
else
{
timestring += numkey;
dispTime();
}
}
Not the cause of your issue, but it may cause you problems later on, so worth pointing out:
Your dispTime method is doing getElementById("timekey") but there's no HTML element with an id of timekey in your HTML.
As a guess, you probably wanted:
<div id="screen">
<input type="text" id="textbox" />
</div>
to be:
<div id="screen">
<input type="text" id="timekey" />
</div>
加载中,请稍侯......
精彩评论