Function named "clear" is not being called. Trying to call "clear()" with inline js

Question

I can't find out why my function isn't being called. I put the alert("test") in there just to test if the function was being called at all, and it isn't.

HTML:

<input type="button" onclick="clear(price,quantity)" value="Clear">

JS:

function clear(price,quantity){
    alert("test");
    i=0;
    if(i<5){

        price[i].value = "";
        quantity[i].value = "";
        i++;
    }
}

EDIT: Here's all of the code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Amount Owed</title>
<script type = "text/javascript">
function amount(price, quantity){
    sum1 = price[0].value * quantity[0].value;
    sum2 = price[1].value * quantity[1].value;
    sum3 = price[2].value * quantity[2].value;
    sum4 = price[3].value * quantity[3].value;
    return sum1 + sum2 + sum3 + sum4;
}
function clear(price,quantity){
    alert("test");
    i=0;
    if(i<5){

        price[0].value = "";
        quantity[0].value = "";
        i++;
    }
}
</script>
</head>
<body>
<h1>Amount Owed</h1>
<p>Enter price for first amount and quantity for each item</p>
<form>
<table>
    <tr>
        <td>PRICE</td>
        <td>QUANTITY</td>
    </tr>
    <tr>
        <td><input type="text" name="price" size="6"></td>
        <td><input type="text" name="quantity" size="6"></td>
    </tr>
    <tr>
        <td><input type="text" name="price" size="6"></td>
        <td><input type="text" name="quantity" size="6"></td>
    </tr>
    <tr>
        <td><input type="text" name="price" size="6"></td>
        <td><input type="text" name="quantity" size="6"></td>
    </tr>
    <tr>
        <td><input type="text" name="price" size="6"></td>
        <td><input type="text" name="quantity" size="6"></td>
    </tr>
</table>
<input type="button" onclick="pay.value = amount(price,quantity)" value="Total">
<input type="button" onclick="clear(price,quantity)" value="Clear">
<p>The total is: <input type="text" id="pay" name="pay"></p>
</form>
</body>
</html>

@PedroL. — It doesn't matter when. The function isn't called until the click event fires and the function doesn't try to touch the DOM. — Quentin, Dec 15 '13 at 19:40

score 4 · Accepted Answer · edited May 23 '17 at 11:45

Probably because clear(price,quantity) in your html is invalid. I bet if you check your console, it is saying that "price" doesn't exist.

Just to verify, I created a demo here (click) and it shows this error in the console (f12)

Uncaught ReferenceError: price is not defined

The problem is with the name "clear" being used in inline js!

This is because "clear" is referring to document.clear and that's not at all what you intend. This is another argument for not using inline js. Read here: Is "clear" a reserved word in Javascript? and here: https://www.google.com/search?q=Why+is+inline+js+bad%3F

I just posted all of the code so you can see, they are defined — Snubber, Dec 15 '13 at 19:42

Quentin · Answer 2 · 2013-12-15T19:43:41.780

In this function — onclick="clear(price,quantity)" — price and quantity are variables that haven't been defined, so you will get a reference error before clear is called.

You can define them with either window.price = 1; or (in the same or wider scope) var price = 1. The latter is usually the better choice.

It looks like you want to pass NodeLists of the input elements you have. You can't just reference them as globals, you have to access them through the DOM.

Since you are dealing with a click event hander on a form control, you can access the form control via this. Form control element objects have a form property which references their associated form. Forms element objects have an elements collection. The elements collection allows you to access form controls by name. If there are multiple controls with the same name, you get a NodeList rather then the node itself.

onclick="clear(this.form.elements.price,this.form.elements.quantity)"

I just posted all of the code so you can see, they are defined — Snubber, Dec 15 '13 at 19:41
@Snubber — No, they aren't. Creating an HTML element doesn't define a JavaScript variable. (At least not in any standard or consistent way) — Quentin, Dec 15 '13 at 19:44

Function named "clear" is not being called. Trying to call "clear()" with inline js

2 Answers2