jsFiddle onload and no-wrap in body - javascript

I am trying to get myself started with jsFiddle. So I tried to run a simple code snippet which includes all HTML, CSS and JavaScript code.
Javascript does not works If I select onLoad in Frameworks & Extensions dropdown
But it does work when I select No Wrap - in from the dropdown
Can you tell me what that means . I have already read this question on SO JavaScript not running on jsfiddle.net
But not able to understand the solution mentioned there.

When you select onLoad, your JavaScript is wrapped with an onload function. This means your code will run when the page has finished loading, but is no longer available in the global scope. It looks like this
window.onload=function(){
function myFunction() {
alert("Hello");
}
}
A workaround might be to assign variables to the window object so that they are accessible anywhere in the page.
For example:
function myFunction() {
alert("Hello");
}
window.myFunction = myFunction;
and
<button onclick="window.myFunction()" >Hi</button>

When using onLoad, the function won't become global one, so you can't invoke it directy from HTML. If it is global - like when using no-wrap - it works.
The onLoad generates something similar:
window.onload = function () {
function myFunction() {
}
}
So, myFunction() is only visible directly in the closure of the anonymous function.

Related

why I couldn't call js function in another part of a html page?

Why does the first JavaScript snippet work, and not the second?:
<script>
commenta();
function commenta(){
alert('test');
}
</script>
<script>
commenta();
</script>
<script>
function commenta(){
alert('test');
}
</script>
As said in the comments, it works because of Hoisting. Javascript engine will move all the declarations to the top of function/global definition.
But second example is throwing an error because Hoisting won't work across <script> tags.
Try swapping the order of script tag, it should work.
fiddle: Your code (Before swap)
fiddle: After swap
commenta();
function commenta()
{
alert('test');
}
In this example, the browser will move all function declarations to the top of the script block and then execute the call.
In the other example, the browser does not yet know how to execute commenta since it hasn't parsed that part of the DOM yet.
You are calling the function before the function is registered, as the 2 tags are registered separately under different tags, where the when the statements are included together under one script tag they are registers as a whole. It's best practice to only call a function after it's been declared.

Why is my jsfiddle Javascript class not defined?

HTML:
<img src="https://help.pace.edu/helpdesk/info_icon_small.gif?v=12_1_0_300.gif" onclick="plusButton_Click()">
js:
function plusButton_Click() {
alert('hi');
}
http://jsfiddle.net/uEypH/1/
I might be new to Javascript and all. But why does my Firefox console say
"ReferenceError: plusButton_Click is not defined"?
Because the function must be in global scope if you intend to call it in inline js.
jsfiddle creates a new closure, so it is not global. Use their --wrap it in head-- option.
Updated demo
Or change
function plusButton_Click() {
alert('hi');
}
to:
window.plusButton_Click = function(){
alert('hi');
}
You have javascript set to onLoad. In a normal page, you would have put it straight in the body most likely. Set it to NoWrap and it should work fine.
By default, jsFiddle places your Javascript code into an onLoad function. Your plusButton_Click will not be visible outside of this closure.
To fix, either:
Select "In <head>" from the dropdown (Example)
Define your function as window.plusButton_Click = function() { ... } (Example)

JavaScript onclick event is not working

A simple JavaScript onclick event is not working but I don't understand why, here is the code:
<button onclick="removeLol()">remove style</button>
function removeLol() {
alert("hello");
}
and here is a simple example: http://jsfiddle.net/YNQg6/1/
That's only because of the way how jsfiddle inserts the javascript.
Jsfiddle wraps your code into a function which limits the scope and protects the global namespace:
window.onload=function(){
function removeLol() {
alert("hello");
element.className = element.className.replace(" lol ", "");
}
}
If you tell jsfiddle to inject the code into the document body it works:
http://jsfiddle.net/YNQg6/13/
Or you could turn your "local" function in a global one:
window.removeLol = removeLol;
The code works just fine (just tried it on my server). Check your console for other errors that may be causing the script to not run

Click button on load event

I have the following javascript -
function onLoad() {
if (!(document.applets && document.VLVChart && document.VLVChart.isActive())) {
setTimeout('onLoad()', 200);
return;
}
objChart = document.VLVChart;
PollEvent();
}
function fan() {
objChart.reorganize();
}
And then when the HTML page is loaded -
<body onLoad="onLoad()">
and have a button within the HTML that execute the fan() function -
<input type='button' value='Fan' onClick='fan();'>
Is it possible for me to activate the fan() function within the onload event so that a user does ont have to click the button?
EDIT
After trying the provided answers, on debugging the code breaks on the line -
objChart.reorganize();
Within the fan() function with the error -
SCRIPT5007: Unable to get value of the property 'reorganize': object is null or undefined
This is odd as when I manually click the button on the page, the function works fine.
Solution
After much head scratching I have realised that I was trying to load the fan() function before the page (and more specifically the objChart) had fully loaded. Hence why adding the function in the onLoad event was not working. I added a setTimeout -
function Fan()
{
setTimeout(function(){objChart.reorganize();},3000);
}
<body onload='onLoad(); fan();'>...
However inline JS is best avoided and you would do well to begin looking into centralised event management. There are various advantages to this.
An answer I wrote yesterday to another question outlines why this is. Something like jQuery makes this trivial if it's new for you.
$(function() {
$('body').on('load', function() {
onLoad();
fan();
});
});
Reading your question I assume you didn't even have tried. Just call that function from within your onLoad()-function:
function onLoad()
{
fan();
/* … */
}
Yes.
You can use <body onload='onLoad(); fan();'> as Utkanos suggests.
If you use jQuery, you can also stick a script in the head containing:
$(function(){
...
});
The jQuery function actually fires earlier, as is explained here.

How to pass parameters in jquery for a user defined function

I need to write a user defined function using jQuery to swap two div tags within the page. I created the function but it is not swapping them as desired. In fact, when I move the same code inline it works fine. Is there something I am missing?
It is impossible to debug something that I cannot see, but I wrote a "swapper function" for you:
function swapem($el1, $el2) {
var $t=$el2.clone().insertAfter($el1);
$el1.insertAfter($el2);
$el2.remove();
}
$('#swapper').click(function () {
swapem($('#div1'), $('#div2'));
});
jsFiddle Demo

Categories