无法获取onclick事件在Javascript中工作的功能

时间:2012-04-20 13:15:29

标签: javascript debugging javascript-events

我正在尝试使用onclick事件来处理某些嵌入式Javascript代码。

我已经尝试了许多不同的方式来注册事件处理程序,并在咨询了很多论坛和书籍之后修改了函数中的代码以完成工作 - 仍然没有成功。

我确定它很简单,但我太接近它了,看看问题是什么!如果有人花时间提出建议,我将非常感激!

以下是HTML文档的摘录:

<?xml version = "1.0" encoding = "utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Order Form</title>

<script type = "text/javascript">

function updateTotal() {
    var boltQty = document.getElementbyId("bolt_quantity").value;
    var nutQty = document.getElementbyId("nut_quantity").value;
    var washQty = document.getElementbyId("wash_quantity").value;   

    document.getElementById("subtotal").value = 
    totalCost = (2.15 * boltQty) + (0.45 * nutQty) + (0.15 * washQty);
}
</script>
</head>
<body>

<h3>Order Form</h3>

<form id = "orderform" action = "">

<table border = "1" cellpadding = "3">
        <tr>
            <th colspan = "8">Product details</th>
        </tr>
        <tr>
            <th>Item</th>
            <th>Product Code</th>
            <th>Diameter</th>
            <th>Length</th>
            <th>Colour</th>
            <th>Unit Price</th>
            <th>Quantity</th>
            <th>Price</th>

        </tr>
        <tr>
            <td>Bolt</td>
            <td>B113</td>
            <td>9</td>
            <td>50</td>
            <td>Black</td>
            <td>2.15</td>
            <td><input type = "text" id = "bolt_quantity" size = "3" /></td>
            <td><input type = "text" id = "row1" onfocus = "this.blur();" size = "3" /></td>
        </tr>
        <tr>
            <td>Nut</td>
            <td>N234</td>
            <td>5</td>
            <td>n/a</td>
            <td>Silver</td>
            <td>0.45</td>
            <td><input type = "text" id = "nut_quantity" size = "3" /></td>
            <td><input type = "text" id = "row2" onfocus = "this.blur();" size = "3" /></td>
        </tr>
        <tr>
            <td>Washer</td>
            <td>W359</td>
            <td>8</td>
            <td>n/a</td>
            <td>Silver</td>
            <td>0.30</td>
            <td><input type = "text" id = "wash_quantity" size = "3" /></td>
            <td><input type = "text" id = "row3" onfocus = "this.blur();" size = "3" /></td>
        </tr>
    </table>
<p>
<input type = "button" value = "Subtotal" onclick = "updateTotal();" />
<input type = "text" size = "3" id = "subtotal" onfocus = "this.blur();" />
</p>

<p>
<input type = "submit" value = "Submit Order" />
<input type = "reset" value = "Clear Order Form" />
</p>
</form>
</body>
</html>

1 个答案:

答案 0 :(得分:4)

var boltQty = document.getElementbyId("bolt_quantity").value;
var nutQty = document.getElementbyId("nut_quantity").value;
var washQty = document.getElementbyId("wash_quantity").value;  

错误的功能名称getElementbyId 正确的是getElementById

  

函数名称区分大小写。