JS console tells me that defined function is not a function

Question

In my javascript file, I define clear as such:

function clear() {
    document.imp1.value = 0
    document.imp2.value = 0
}

I'm unsure about the syntax of that, but that is not the issue here (although if it is wrong, I'd appreciate a bit of help in that too.) My issue is that whenever I press the button clear, as defined:

<div id="calc">
    <form name="calc_input">
    <input type="text" id="imp1" value="0"/>
    <input type="text" id="imp2" value="0"/>
    <!-- buttons -->
    <button type="button" onclick="clear()" id="clear">Clear</button>

    </form>
</div>

I get an an error telling me that "clear" is not a function. Any ideas?

Edit: It turns out clear was conflicting with another built-in function, I renamed it to clr and it works.

maybe the reason why you getting this error is because you included the js file after your html. put it on top, or in header section of your html to fix it — Semi-Friends, Mar 20 '17 at 12:37
I'm not entirely sure but don't actually use `clear` because it's inbuilt in console as well to clear console. You'll run into problems while debugging — mehulmpt, Mar 20 '17 at 12:37
did you embed `function clear() { ... }` in another function in your js file? ( such as `(function(){..}())` ) — Psi, Mar 20 '17 at 12:37
my other js, with the other buttons, works fine. I just omitted them for code clarity, but accessing the JS is not the problem — Alec, Mar 20 '17 at 12:38
Because you have a name collision of the button id and the function name.... — epascarello, Mar 20 '17 at 12:39
yup, changed it to clr and it works. Now i just have to figure out the way to make value=0 because mine fails horrendously — Alec, Mar 20 '17 at 12:40
Does this answer your question? [Why can't I call a function named clear from an onclick attribute?](https://stackoverflow.com/questions/31613748/why-cant-i-call-a-function-named-clear-from-an-onclick-attribute) — Rubén, Oct 01 '22 at 19:33

score 3 · Accepted Answer · answered Mar 20 '17 at 12:44

3

How about using the button type reset? No JS required.

<button type="reset" value="Clear">Clear</button>

answered Mar 20 '17 at 12:44

FD3

361
2
10

This fixes the problem, but it doesn't explain why the OP had the issue with the function name clashing with the element ID (which stems from a decision by IE and JScript developers 20 years ago to create global variables from element IDs). – RobG Mar 20 '17 at 12:50
I guess i just have to check if any of my defined functions already exist before trying to use them – Alec Mar 20 '17 at 12:50
@alec935—then you're in a discussion about sensible naming convetions for elements and variables (and that the button doesn't need a ID anyway). ;-) – RobG Mar 20 '17 at 12:52
@robG I like using an id for all my buttons for css purposes :) – Alec Mar 20 '17 at 12:54

score 0 · Answer 2 · answered Mar 20 '17 at 12:59

Change the name of the on click function from "clear" to for example "del" and it will work. :)

Like this:

<div id="calc">
<form name="calc_input">
<input type="text" id="imp1" value="0"/>
<input type="text" id="imp2" value="0"/>
<!-- buttons -->
<button type="button"  onclick="del()" id="clear">Clear</button>
</form>
</div>

<script>
function del()
{
$('#imp1').val(0);
$('#imp2').val(0);
}
</script>

JS console tells me that defined function is not a function

2 Answers2