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:
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
How to Refresh Page on Back Button Click
Convert Data Uri to File Then Append to Formdata
"Submit Is Not a Function" Error in JavaScript
Full-Screen Iframe With a Height of 100%
How to Have an Element With an Id That Starts With a Number
How to Save Canvas as an Image With Canvas.Todataurl()
Why Does This Simple Jsfiddle Not Work
Disable Form Auto Submit on Button Click
How to Add/Update an Attribute to an HTML Element Using JavaScript
Selecting All Text in HTML Text Input When Clicked
Encryption in JavaScript and Decryption With PHP
Why Split the ≪Script≫ Tag When Writing It With Document.Write()
Get Cursor Position (In Characters) Within a Text Input Field
How to Communicate Between Iframe and the Parent Site
How to Pass Parameters Using Ui-Sref in Ui-Router to the Controller
Adjust Width of Input Field to Its Input
Difference Between ≪Script Src="Foo.Js"≫≪/Script≫ and ≪Script Src="Foo.Js"/≫