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 <head>/<body>". jsfiddle.net/33wLs160 — Josh Crozier
– Josh Crozier, Commented Oct 12, 2014 at 20:44
could you please check this @JoshCrozier - jsfiddle.net/hiteshbhilai2010/33wLs160/6 — Hitesh
– Hitesh, Commented Oct 12, 2014 at 20:49
You could omit the $(document).ready(...) wrapper jsfiddle.net/Ldoumrhz — Josh Crozier
– Josh Crozier, Commented Oct 12, 2014 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
– Quentin, Commented Oct 12, 2014 at 21:14

dreyescat · Accepted Answer · 2014-10-12 21:06:52Z

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, 2014 at 21:06

dreyescat

13.9k5 gold badges52 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

dreyescat Over a year ago

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 Over a year ago

I am not saying that jQuery is stopping it working, but it is not required.

Quentin Over a year ago

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.

dreyescat Over a year ago

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.

S.Serpooshan · Accepted Answer · 2017-02-07 06:15:59Z

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.

Koba · Accepted Answer · 2019-12-17 14:17:53Z

1

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, 2019 at 14:17

Koba

2371 silver badge13 bronze badges

Comments

ddd_dd_2012 · Accepted Answer · 2014-10-12 20:48:55Z

0

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

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

answered Oct 12, 2014 at 20:48

ddd_dd_2012

91 bronze badge

3 Comments

Hitesh Over a year ago

i want to give onclick in html

Quentin Over a year ago

@hitesh — Why? This is 2014, not 1998.

Hitesh Over a year ago

just wanted to know why it happened ... thanks for the answer

Alex Char · Accepted Answer · 2014-10-12 21:35:49Z

0

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.

answered Oct 12, 2014 at 21:35

Alex Char

33.2k9 gold badges51 silver badges71 bronze badges

Collectives™ on Stack Overflow

javascript onclick not working in jsfiddle

EDIT

5 Answers 5

4 Comments

Comments

Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

EDIT

5 Answers 5

4 Comments

Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related