2011-04-19 92 views
2

这段代码有什么问题? HTML验证,但JavaScript仍然无法正常工作。说按钮被点击时,时间键是不确定的。浏览器说功能没有定义(但它是)

<!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> 

未捕获的ReferenceError:timekey没有定义 (匿名功能)dreamweaver.html:87 onclickdreamweaver.html:88

+0

哎呀。我解决了这个问题。该类型需要是文本/ JavaScript,而不是JavaScript。 – pcdude2143 2011-04-19 16:01:03

回答

1

你必须等待整个DOM加载。

1

看看代码中的这些行。你的脚本已经全部注释掉了。

<script type="javascript"> 
<!-- 

    ... 
//--> 

德米特里是正确的脚本类型是不准确的,应该是类型= “文/ JavaScript的”

5

脚本错误类型:

<script type="text/javascript"> 
+0

由于类型不正确 - 您的脚本未被识别为JavaScript,因此您的实施函数未添加到DOM – 2011-04-19 16:03:12

1

试试这个>

var timekey = function (numkey) 
    { 

    if (timestring.length >4) 
    { 

    } 

    else 
    { 
     timestring += numkey; 
     dispTime(); 

    } 

    } 
1

不是你的问题的原因,但它可能会导致你后来的问题,所以值得指出:

您的dispTime方法正在执行getElementById(“timekey”),但HTML中没有带有timekey id的HTML元素。

作为一个猜测,你可能想:

<div id="screen"> 
<input type="text" id="textbox" /> 
</div> 

是:

<div id="screen"> 
<input type="text" id="timekey" /> 
</div> 
相关问题