javascript onclick not working in jsfiddle

Question

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

In the options on the left, choose "No wrap - in /". http://jsfiddle.net/33wLs160/ — Josh Crozier, Oct 12 '14 at 20:44
could you please check this @JoshCrozier - http://jsfiddle.net/hiteshbhilai2010/33wLs160/6/ — Hitesh, Oct 12 '14 at 20:49
You could omit the `$(document).ready(...)` wrapper http://jsfiddle.net/Ldoumrhz/ — Josh Crozier, Oct 12 '14 at 20:52
@hitesh — Why would you want to keep that? It is used for running code when the DOM is ready. There is no reason for you to want to wait until the DOM is ready before defining that function! — Quentin, Oct 12 '14 at 21:14
so are you saying no need to use `$(document).ready(...)` in jsfiddle ? — Hitesh, Oct 13 '14 at 05:08
JSFiddle has nothing to do with it. There's no need to use `ready` for the code you have written. — Quentin, Oct 13 '14 at 07:38

score 12 · Answer 1 · answered Oct 12 '14 at 21:06

12

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

answered Oct 12 '14 at 21:06

dreyescat

13,558
5
50
38

But it needs both, No wrap and No library to work. Even No wrap - in body is enough too. What is important is the No library (pure JS). – dreyescat Oct 12 '14 at 21:13
I am not saying that jQuery is stopping it working, but it is not required. – dreyescat Oct 12 '14 at 21:18
That is **exactly** what you were saying. Quote: "But it needs both, No wrap and No library to work". No Library means not loading jQuery. – Quentin Oct 12 '14 at 21:19
You are right. I interpreted your first comment wrong. I was interpreting the *I tried No wrap - In head and tried again with document.ready it is not working in jsfiddle* as if the OP was using the `$(document).ready` too. – dreyescat Oct 12 '14 at 21:29

score 4 · Answer 2 · answered Feb 07 '17 at 06:15

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.

score 0 · Answer 3 · answered Oct 12 '14 at 20:48

0

<input value="press" id='a' type="button">
document.getElementById('a').onclick = function() { alert(1); }

http://jsfiddle.net/gs6rehnx/12/

answered Oct 12 '14 at 20:48

ddd_dd_2012

9
1

i want to give onclick in html – Hitesh Oct 12 '14 at 20:50
1

@hitesh — Why? This is 2014, not 1998. – Quentin Oct 12 '14 at 21:15
just wanted to know why it happened ... thanks for the answer – Hitesh Oct 13 '14 at 05:06

score 0 · Answer 4 · answered Oct 12 '14 at 21:35

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.

score 0 · Answer 5 · answered Dec 17 '19 at 14:17

0

Select "No wrap - bottom of " in "Load Type" of the scripting panel. This is the solution for Jsfiddle (till 17 december 2019).

answered Dec 17 '19 at 14:17

Koba

81
10

javascript onclick not working in jsfiddle

EDIT

5 Answers5

Linked

Related