Recently I created a fiddle with the following code -

HTML

<button onclick="action();">click me<img src=".gif&text=Image+1" width="200px" id="ImageButton1"></button>

JS

function action ( )
{

if(document.getElementById("#ImageButton1").src == '.gif&text=Image+1' )
document.getElementById("#ImageButton1").src = '.gif&text=Image+2';
else
document.getElementById("#ImageButton1").src = '.gif&text=Image+1';
}

Fiddle Link - /

This code is working in FF and in my local html file but throws error in chrome console -

Uncaught ReferenceError: action is not defined 

I further investigated the error and found -

Uncaught ReferenceError for a function defined in an onload function

So I tried this also -

window.action = function(){...code here...};

But no luck :(

Kindly let me know about this behavior why it is not working in chrome and working for others. Please don't just provide a patch to make the fiddle working as I am also interested about the behavior. Descriptive answers(with relevant link for further study) really appreciated in the case so that I can move properly in my rest of projects.

Let me know if the question is not on the track, I will take it down(although I put my honest efforts to make the question clean and clear)

Recently I created a fiddle with the following code -

HTML

<button onclick="action();">click me<img src="http://dummyimage./200x200/000000/fff.gif&text=Image+1" width="200px" id="ImageButton1"></button>

JS

function action ( )
{

if(document.getElementById("#ImageButton1").src == 'http://dummyimage./200x200/000000/fff.gif&text=Image+1' )
document.getElementById("#ImageButton1").src = 'http://dummyimage./200x200/dec4ce/fff.gif&text=Image+2';
else
document.getElementById("#ImageButton1").src = 'http://dummyimage./200x200/000000/fff.gif&text=Image+1';
}

Fiddle Link - http://jsfiddle/QVRUG/4/

This code is working in FF and in my local html file but throws error in chrome console -

Uncaught ReferenceError: action is not defined 

I further investigated the error and found -

Uncaught ReferenceError for a function defined in an onload function

So I tried this also -

window.action = function(){...code here...};

But no luck :(

Kindly let me know about this behavior why it is not working in chrome and working for others. Please don't just provide a patch to make the fiddle working as I am also interested about the behavior. Descriptive answers(with relevant link for further study) really appreciated in the case so that I can move properly in my rest of projects.

Let me know if the question is not on the track, I will take it down(although I put my honest efforts to make the question clean and clear)

• javascript
• html
• google-chrome
• jsfiddle

• Frameworks & Extensions = jQuery 1.7.2 – Sameer H. Ibra Commented May 19, 2013 at 11:35
• 1 @SameerH.Ibra I know I can manage it from jQuery but I am looking for JS this time ONLY..haven't tagged it with jQuery – swapnesh Commented May 19, 2013 at 11:38

1 Answer 1

It's because the "language" is set as Javascript 1.7 in your jsFiddle.

Why does this only work in Firefox?

According to the versioning history, 1.7 was only ever supported in the Mozilla Firefox browser, hence why it works there and not in other browsers.

Solution:

Change the language from Javascript 1.7 to Javascript in the Languages section of your jsFiddle and it will work. I'm guessing you must have changed it to 1.7 specifically, because the default is normally just Javascript (you can see that by pasting your code into a new jsFiddle, where it will work as expected).

jsFiddle example.