15

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

7
  • 1
    In the options on the left, choose "No wrap - in <head>/<body>". jsfiddle.net/33wLs160 Oct 12, 2014 at 20:44
  • could you please check this @JoshCrozier - jsfiddle.net/hiteshbhilai2010/33wLs160/6
    – Hitesh
    Oct 12, 2014 at 20:49
  • You could omit the $(document).ready(...) wrapper jsfiddle.net/Ldoumrhz Oct 12, 2014 at 20:52
  • if I want to keep $(document).ready(...) How do I use it
    – Hitesh
    Oct 12, 2014 at 20:53
  • 1
    @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, 2014 at 21:14

5 Answers 5

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

4
  • 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, 2014 at 21:13
  • I am not saying that jQuery is stopping it working, but it is not required.
    – dreyescat
    Oct 12, 2014 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, 2014 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, 2014 at 21:29
4

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.

1

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

Image

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

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

3
  • i want to give onclick in html
    – Hitesh
    Oct 12, 2014 at 20:50
  • 1
    @hitesh — Why? This is 2014, not 1998.
    – Quentin
    Oct 12, 2014 at 21:15
  • just wanted to know why it happened ... thanks for the answer
    – Hitesh
    Oct 13, 2014 at 5:06
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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.