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)
Related
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.
I´m having a normal JavaScript-function and want to use the Variable (myVar) also in my jQuery Code - is this possible? and how?:
<a onclick="showtitle(abctitle);" href="#">Testlink</a>
<script>
function showtitle(myVar) {
myTitle = myVar;
}
$(document).ready(function() {
alert(myTitle); //I would like to alert "abctitle"
};
</script>
Firstly, don't mix DOM0 inline event handlers with jQuery. Separate your markup and your logic.
If you use a data- attribute you can put your variable's content in your HTML, and then extract that in the event handler:
<a id="test" data-foo="mytitle" href="#">Testlink</a>
and then:
$(document).ready(function() {
$('#test').on('click', function() {
alert($(this).data('foo'));
}
});
In this code the alert won't appear until the link is actually clicked on, of course.
I believe #Alnitak has a great answer. But if you are just looking to solve the question you asked, wrap abctitle in single quotes and make myTitle a global variable:
<a onclick="showtitle('abctitle 2');" href="#">Testlink</a>
<script>
myTitle = "abctitle";
function showtitle(myVar) {
myTitle = myVar;
}
$(document).ready(function() {
alert(myTitle); //I would like to alert "abctitle"
});
</script>
Also, your document ready function was missing its closing parenthesis )
Working example here: http://jsfiddle.net/CbhxY/
UPDATE
Working example on jsfiddle did not work so well. Try this: http://jsbin.com/ohedab/1/
The JS Bin example also adds the alert call in the showtitle function.
you can do with this
function showtitle(abctitle){
alert(myTitle); //I would like to alert "abctitle"
}
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
http://jsfiddle.net/xEpGg/740/
If I call it directly right after my script using:
$.custom.test();
It works as expected. However, if I put it anywhere in the HTML, it won't fire. I defined my object in jQuery, shouldn't that be accessible everywhere within the page?
In case you cannot define the function in the way #frenchie suggested try:
setTimeout(function(){$.custom.test();}, 0);
Why is setTimeout(fn, 0) sometimes useful?
And why the heck would you want to assign anything to the jQuery global?
See the solution here: you need to define the custom function before you can use it.
Like this:
<script>
$.custom = {
test : function() { alert("wtf"); }
};
</script>
<div id="helloworld" style="border:solid; border-width:5px;">
BLAH
</div>
<script>
$.custom.test();
</script>
You are adding your script to the page after it's loaded, but invoce $.custom.test() before it's loaded..
Change this option to no wrap (head) and it will work fine..
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