Cannot get function for onclick event to work in Javascript

Question

I am trying to get an onclick event to work in some embedded Javascript code.

I've tried a number of different ways to register the event handler, and modify the code in the function to get the job done, after consulting very many forums and books - still no success.

I'm sure it's something simple but I'm too close to it to see what the problem is! If any could take the time to advise, I would be most appreciative!

Here's an excerpt from the HTML document:

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

What isn't working? Are you getting errors or is your result just not what you're expecting? — Terry
– Terry, Commented Apr 20, 2012 at 13:22

TheCodeArtist · Accepted Answer · 2015-04-17 17:30:40Z

4

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

Wrong function name getElementbyId.
Proper one is getElementById.

Function names are case-senstive.

edited Apr 17, 2015 at 17:30

TheCodeArtist

22.6k4 gold badges74 silver badges135 bronze badges

answered Apr 20, 2012 at 13:20

Denis Ermolin

5,5766 gold badges29 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1346592 Over a year ago

Yup, figured it was something dumb. Thank you!

Collectives™ on Stack Overflow

Cannot get function for onclick event to work in Javascript

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related