JavaScript onclick event is not working - javascript

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

Related

jsFiddle onload and no-wrap in body

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.

javascript onclick not working in jsfiddle

I am trying to make jsfiddle , my onclick is not working in jsfiddle. what is wrong in my code
<input value="press" type="button" onclick="myclick()">
function myclick(){
alert("myclick")
}
http://jsfiddle.net/hiteshbhilai2010/gs6rehnx/11/
EDIT
I tried No wrap - In head and tried again with document.ready it is not working in jsfiddle again
ERROR - Uncaught ReferenceError: myclick is not defined
http://jsfiddle.net/hiteshbhilai2010/33wLs160/6/
I have checked with already existing question here but my problem is happening when I am trying it in jsfiddle
Can some one please help me ....thanks
You need to select No library (pure JS) and No wrap - in head. Then it will work as a simple HTML with javascript page.
This will be inserted in a <script> element in the <head>:
function myclick(){
alert("myclick")
}
See demo
As others said, for first case you have to set No wrap - in <head> or No wrap - in <body> as javascript panel settings (the blue link at js panel top-right).
For the second (your Edit) question, your code inside a function and the js will run it (within a new context), but it will do nothing as you just define a function and ignore it without any call or assignment.
if you call alert(myclick) you will see all the code is executed and its defined at that point. see this fiddle
$(document).ready(function() {
//alert("ready is executed");
function myclick(){
alert("myclick is called")
window.location.reload(true);
}
alert(myclick); //this will show the myclick is a defined function!
//document.getElementsByTagName("input")[0].onclick = myclick;
})
if you call this:
document.getElementsByTagName("input")[0].onclick = myclick;
in that $(document).ready({...}) scope, it will be assigned to the button and works as you wish.
<input value="press" id='a' type="button">
document.getElementById('a').onclick = function() { alert(1); }
http://jsfiddle.net/gs6rehnx/12/
This one is working. Just remove it from document ready event. Also semicolons are optional in javascript but i advice to use them.
function myclick() {
alert("myclick");
window.location.reload(true);
}
<input value="press" type="button" onclick="myclick();">
<script>
alert("home");
</script>
Here is the fiddle.
Select "No wrap - bottom of " in "Load Type" of the scripting panel.
This is the solution for Jsfiddle (till 17 december 2019).

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)

Simple function not working in Chrome and Chromium

This simple piece of chode is not working in Chromium(Ubunto) and Chrome.
HTML
<input type="button" id="saveFavPunch" name="saveFavPunch" value="save" onClick="saveFavPunch()" >
SCRIPT
var req;
function saveFavPunch(){
alert('govind singh');
if(!req){
req=$.ajax({
type:"POST",
url:"edit?editType=saveFavPunch",
data: {"value":document.getElementById("punchId").value},
complete:function(){req=false},
success: function(data){
$.fancybox.close();
if(data==""){
alert("ERROR!");
}else{
if(data=="0"){
alert("Internal Error Occurs, please try after some time");
}else{
document.getElementById("favPunchline").innerHTML=data;
}
}
}//end success
});
}
}
Can't add a comment yet, nothing's wrong with the code, but to make it work in jsfiddle change onLoad to noWrap
Description of what each of the settings does: http://doc.jsfiddle.net/basic/introduction.html#frameworks-and-extensions
Basically you need it to be in a simple <script> tag, not in the onLoad event
Fiddle with the code you provided: http://jsfiddle.net/Sam88/YEPm3/12/
Since you mentioned jQuery in your tags, I thought I'd give a jQuery solution: Fiddle
Html:
<input type="button" id="saveFavPunch" name="saveFavPunch" value="save" />
Javascript:
$("#saveFavPunch").on("click", function () {
alert('hello2');
});
:)
Edit
Javascript Not Running On JSFiddle is a possible duplicate of your question. I am quoting the selected answer:
The functions you define are defined in an onload function, so whereas before they were referenceable, because they are defined in that function they can only be referenced from within that function. You reference them as globals in your HTML. You have three options
a) ( easiest, quickest, not ideal ) - change function blah(){} to window.blah = function(){}; making the functions global.
b) ( ideal way ) - use unobtrusive Javascript to attach behaviour to DOM elements from within the JS solely, meaning separate HTML from JS.
c) Make the jsfiddle not wrap the stuff onload. Change onLoad to no wrap ( body or head ).
So instead of you'd do var e = document.getElementById('foo'); e.onclick = lol; in the JS only.
I recommend b as it encourages best practices.
Just one change — JSFiddle setting from "onLoad" to "No wrap - in " and it works:
http://jsfiddle.net/3f7PT/
The problem with the onLoad option is that this is what it outputs in the results:
//<![CDATA[
window.onload=function(){
function saveFavPunch(){
alert('hello2');
}
}//]]>
So your function gets unintentionally wrapped in another function which stops it being found from that onclick call.
Hope this helps.
The following entire script works properly in Chrome for me.
<html>
<head>
<script>
function saveFavPunch(){
alert('hello2');
}
</script>
</head>
<body>
<input type="button" id="saveFavPunch" name="saveFavPunch" value="save" onClick="saveFavPunch()" >
</body>
This works
document.getElementById("saveFavPunch").addEventListener("click", saveFavPunch);
function saveFavPunch(){
alert('hello2');
}
http://jsfiddle.net/6sg9R/
Ye JSFiddle is very finicky about Alerts. It works no problem as Spassvogel shows but your way should work as well from file as opposed to on JSfiddle.
Even those you having this type of problem then use div tag
<div id="saveFavPunch" style="height:30px; widht:100px; display:block;" onClick="saveFavPunch()">Save</div>
I think Using this code Your problem will solve.

Use JavaScript-Variable in jQuery

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"
}

Categories