Why Isn't My JavaScript Working in Jsfiddle

Why isn't my JavaScript working in JSFiddle?

The function is being defined inside a load handler and thus is in a different scope. As @ellisbben notes in the comments, you can fix this by explicitly defining it on the window object. Better, yet, change it to apply the handler to the object unobtrusively: http://jsfiddle.net/pUeue/

$('input[type=button]').click( function() {
alert("test");
});

Note applying the handler this way, instead of inline, keeps your HTML clean. I'm using jQuery, but you could do it with or without a framework or using a different framework, if you like.

Why is my JSFiddle not working? (where to place script)

There was a double quote in your url for your external script.

Like this:

"https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js

I've updated a fiddle with the current url:

http://jsfiddle.net/gregborbonus/k37jqj2c/4/

Also, if you need to load jQuery, just click the Javascript button (top right of the javascript console with the gear next to it) and under "Frameworks and Extensions" drop down to the jQuery version you want.

Javascript Code works in jsfiddle and but not in the Browser

The usual reason for this is that you're putting your code above the elements that it operates on, and not delaying the code using onload or "ready" events. jsFiddle's default is to put your JavaScript in an onload handler, which delays it until very late in the page load process.

Fundamentally, before your code can do something with an element on the page, the element has to exist. For it to exist, the browser must have processed the HTML for it. So this fails:

<html>
<head>
<script>
// FAILS
document.getElementById("foo").style.color = "green";
</script>
</head>
<body>
<div id="foo">This is foo</div>
</body>
</html>

but this works:

<html>
<head>
</head>
<body>
<div id="foo">This is foo</div>
<script>
// Works
document.getElementById("foo").style.color = "green";
</script>
</body>
</html>

Do I need an onpage load event?

Almost certainly not.

Does the javascript need to be put in a function?

Not necessarily. What you do is put the script tag at the very end of the HTML, just before the closing </body> tag.

Simple onload doesn't work in JSFIddle

Your first problem:

Onload

You have configured JSFiddle to run your JS when the load event fires.

Consequently, when the load event fires, you bind another load event handler.

Your new load event handler is never called because the load event has already fired.

Change the menu option to one of the "No Wrap" approaches.


Your second problem:

The load event fires on the window object, not the body element.

You need to assign the property to the right place.

onload = function(){
alert("LOADED!");
}

Such: https://jsfiddle.net/n5jb0159/5/

simple javascript not working in jsfiddle

By default, jsFiddle puts all of your code within an onload handler, like this:

window.onload = function() {
// ...your code here...
};

That means your alertme function isn't a global, and it has to be for onclick attributes to work.

There's a drop-down on the left, near the top, that controls this behavior. Change it from onLoad to one of the "no wrap" options to make your function global.

Code in the JsFiddle is not working

You can set the option to No wrap in head or body.

When you use onload or onDomReady, your code is wrapped inside another function that is invoked on load or ready event. So, your function is not accessible from outside of that function. And you'll get error

ReferenceError: functionName is not defined

Making the function no wrap makes it global, can be accessed from anywhere.

Updated fiddle

Jsfiddle Doc



Related Topics



Leave a reply



Submit