浏览器说功能未定义(但它是)

时间:2011-04-19 15:50:50

标签: javascript html dom

这段代码有什么问题? 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:未定义时间键 (匿名函数)dreamweaver.html:87 onclickdreamweaver.html:88

5 个答案:

答案 0 :(得分:5)

脚本类型错误:

<script type="text/javascript">

答案 1 :(得分:1)

您必须等待整个DOM加载。

答案 2 :(得分:1)

在代码中查看这些行。您已将所有脚本注释掉。

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

  ...
//-->

Dmitriy是正确的你的脚本类型不准确它应该是type =“text / javascript”

答案 3 :(得分:1)

试试这个&gt;

var timekey = function (numkey) 
    {   

    if  (timestring.length >4) 
    {

    }

    else
    {
        timestring += numkey;
        dispTime();

    }   

    }

答案 4 :(得分:1)

不是您的问题的原因,但可能会在以后引起您的问题,因此值得指出:

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

作为猜测,你可能想要:

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

是:

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