Javascript: Object doesn't support this action error with onclick="status()"

Question

I am getting an error in IE11 when attempting to call a function that is executing on click in a radio button.

Here is the html for the radio button:

<input type="radio" name="filter" value="status" onclick="status()" checked>

The function is defined at the bottom of the page:

function status(){

    try{
        var td = document.getElementById("check1td");
        td.innerHTML = "Current (CURR)<input type=\"checkbox\" name=\"skustat1\" value=\"CURR\" checked>";

        td = document.getElementById("check2td");
        td.innerHTML = "Test (TEST)<input type=\"checkbox\" name=\"skustat2\" value=\"TEST\" checked>";

        td = document.getElementById("check3td");
        td.innerHTML = "Stocking Internet (SINET)<input type=\"checkbox\" name=\"skustat3\" value=\"SINET\" checked>";

        td = document.getElementById("check4td");
        td.innerHTML = "Sellable Display (SLDSP)<input type=\"checkbox\" name=\"skustat4\" value=\"SLDSP\" checked>";

    }
    catch(err){
        alert(err.message);     
    }
}

I have a similarly defined function on the sibling radio button and it is called correctly. So, my question is, is status() a reserved javascript function that IE won't respond to? And, if so, why does this work in other browsers?

EDIT: changed Status() to status() to reflect how it actually appears in my code.

UPDATE1: It also seems that it works when the browser is first opened in IE, maybe a caching issue?

Looks like it might just be a difference in capitalization. JS is case-sensitive, and "Status" is different from "status". — Scott Sauyet, Oct 19 '15 at 17:15
@JavierBuzzi You need the `()` to make it call the function. — Barmar, Oct 19 '15 at 17:16
Sorry, i screwed up my question, status() is not capitalized on my radio button. exact error message is "Object doesn't support this action" in IE debugger. — faircloud, Oct 19 '15 at 17:22
yes. my bad. http://jsfiddle.net/hLmbk6bz/1/ you do need the `()` — Javier Buzzi, Oct 19 '15 at 17:22
http://stackoverflow.com/questions/4633183/different-javascript-object-literal-behaviour-in-firefox-google-chrome or http://stackoverflow.com/questions/18808614/javascript-variable-assignment-of-object-returns-string — epascarello, Oct 19 '15 at 17:38

score 0 · Accepted Answer · answered Oct 19 '15 at 17:30

0

You cant use status as a variable in chrome (possibly other browsers too).

var internal = [];
for(var b in window) { 
  if(window.hasOwnProperty(b)) internal.push(b); 
}
console.log(internal); 

[... "status", ...]

Try renaming it to Status() or anything else. This code works: http://jsfiddle.net/hLmbk6bz/1

answered Oct 19 '15 at 17:30

Javier Buzzi

6,296
36
50

Is the code you posted part of the browser code? I'm not sure where you got it from. – faircloud Oct 19 '15 at 17:42
No, the code is to show that `status` is a build in variable and youre not meant to mess with it. My point it just to rename it. – Javier Buzzi Oct 19 '15 at 17:43

score 0 · Answer 2 · answered Oct 19 '15 at 17:32

0

Add an event listener like this:

document.getElementById("clickMe").addEventListener("click", status);

See fiddle: http://jsfiddle.net/bun4g2d0/4/

HTML

<input id="clickMe" type="radio" name="filter" value="status" onclick="status()" checked> 
    <div id="check1td"></div>
    <div id="check2td"></div>
    <div id="check3td"></div>
    <div id="check4td"></div>

javascript

document.getElementById("clickMe").addEventListener("click", status);
        function status(){
    try{
        var td = document.getElementById("check1td");
        td.innerHTML = "Current (CURR)<input type=\"checkbox\" name=\"skustat1\" value=\"CURR\" checked>";

        td = document.getElementById("check2td");
        td.innerHTML = "Test (TEST)<input type=\"checkbox\" name=\"skustat2\" value=\"TEST\" checked>";

        td = document.getElementById("check3td");
        td.innerHTML = "Stocking Internet (SINET)<input type=\"checkbox\" name=\"skustat3\" value=\"SINET\" checked>";

        td = document.getElementById("check4td");
        td.innerHTML = "Sellable Display (SLDSP)<input type=\"checkbox\" name=\"skustat4\" value=\"SLDSP\" checked>";

    }
    catch(err){
        alert(err.message);     
    }
}

answered Oct 19 '15 at 17:32

Adam Buchanan Smith

9,422
5
19
39

This works, and so does changing the name of the function. But why is the error occurring? – faircloud Oct 19 '15 at 17:37
That might or might not solve the problem, but it doesn't explain why it's occuring. – Scott Sauyet Oct 19 '15 at 17:38
With this solution you dont need the onclick="status()" at all since youre overriding it anyway.. why keep it? http://jsfiddle.net/bun4g2d0/5/ – Javier Buzzi Oct 19 '15 at 17:38
@JavierBuzzi out of laziness, who really cares if it is there or not, it's not doing anything lol. – Adam Buchanan Smith Oct 19 '15 at 18:11
The next guy man, thats why. I code by these words: "Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live." – Javier Buzzi Oct 19 '15 at 18:13
That's up to you then lol, I work for myself, there is no next guy. – Adam Buchanan Smith Oct 19 '15 at 18:15

score 0 · Answer 3 · answered Oct 19 '15 at 17:36

0

It's definitely the "status" name. That's the only difference between this:

http://jsfiddle.net/CrossEye/ux636prr

and this:

http://jsfiddle.net/CrossEye/ux636prr/1/

But the second one, which changes "status" to "Status" works fine.

And an obligatory code link, although that Fiddle uses the same code as the question :smile: :

<input type="radio" name="filter" value="status" onclick="status()" checked>

answered Oct 19 '15 at 17:36

Scott Sauyet

49,207
4
49
103

Ahh, yes, @epascarello's comments above explain it. It's been a long time since I mucked about with `window.status`.... – Scott Sauyet Oct 19 '15 at 17:39

score 0 · Answer 4 · answered May 03 '17 at 13:18

My answer doesn't directly apply to this case, but I had the exact same error caused by a really similar and related problem. My function name was not a reserved word, but was the exact same name as my "name" attribute of my input radio.

<script>
function LoginType()
{
  // Code here never called because the function name is the same as my input name...
}
</script>
<input type="radio" name"LoginType" value="Windows" onclick="LoginType();" />

So I had to change my name like:

<input type="radio" name"radio_LoginType" value="Windows" onclick="LoginType();" />

Javascript: Object doesn't support this action error with onclick="status()"

4 Answers4