5

I have some html/javascript that works in my .cshtml file.
When I try to move it in to jsfiddle to experiment with, it does not work.
Not sure if if it's my lack of javascript experience, jsfiddle experience, probably both....

html: 

<div>
<button name="startBtn" id="startBtn" onclick="startTimer">Start</button>
</div>

(I have also tried "startTimer()" for the onclick attribute; same result.)

javascript: 

function startTimer() { alert("startTimer"); }

When I click the button, I see this in the Console:

Uncaught ReferenceError: startTimer is not defined

What am I overlooking?
(jsfiddle: http://bit.ly/1buQx9t)

Number8
  • 12,322
  • 10
  • 44
  • 69
  • exact duplicate of [Simple example doesn't work on JSFiddle](http://stackoverflow.com/questions/5431351/simple-example-doesnt-work-on-jsfiddle) (apart from that you also forgot the parenthesis to invoke `startTimer`) – Bergi Dec 10 '13 at 16:15

6 Answers6

11

jsFiddle Demo

First you have to set the Framework to No wrap - in <head>, instead of onLoad.

JSFiddle Option

Description

onLoad is the same as window.onload=function(){[YOU ARE TYPING HERE]} in JavaScript or $(function(){[YOU ARE TYPING HERE]}); in jQuery.

No wrap - in <head> is the same as <head><script type="text/javascript">[YOU ARE TYPING HERE]</script</head>

No wrap - in <body> is the same as <body>[HTML CODE HERE]<script type="text/javascript">[YOU ARE TYPING HERE]</script></head>

I hope this clears up the settings in jsFiddle, they can be somewhat confusing.

Second your HTML is slightly wrong:

HTML

<div>
    <input type="button' value='"Start" onclick="startTimer()"/>
</div>

Description

onclick="startTimer" was changed to onclick="startTimer()" this will execute the function.

abc123
  • 17,855
  • 7
  • 52
  • 82
3

First issue: You have the jsfiddle to set on onload so the function is not in global scope.

enter image description here

Second issue, you are not calling the function. You are missing ()

 onclick="startTimer()"
epascarello
  • 204,599
  • 20
  • 195
  • 236
0

You have some weird quotes going on there (in your fiddle) plus you forgot the () after the name of the function. Use:

<input type="button" value=" Start " onclick="startTimer()" />

jsFiddle example

j08691
  • 204,283
  • 31
  • 260
  • 272
  • Thanks for the reply. One difference between yout fiddle and mine -- even after I cleaned up the quote problems -- was under "Frameworks and Extensions". I had the 2nd option set to "onLoad"; when I changed it to one of the "no wrap ..." options, it worked. I'll have to investigate those options... – Number8 Dec 10 '13 at 16:24
  • You don't need to use the onLoad option with your code. Just place it in the head of your document. The onLoad option in jsFiddle wraps your JavaScript like this: `//<![CDATA[ window.onload=function(){ function startTimer() { alert("startTimer"); } }//]]>` – j08691 Dec 10 '13 at 16:27
0

If you're using pure JavaScript in jsfiddle (ie - no jquery, etc), then change the second dropdown to "No wrap - in <head>"

WEFX
  • 8,298
  • 8
  • 66
  • 102
0

You had some extra misplaced quotes and were not calling the function. Needed to add the () to call it. Finally you needed to change the "onload" to "no wrap - in "

<div>
     <input type="button" value="Start" onclick="startTimer()"/>
 </div>
Bob Tate
  • 1,381
  • 9
  • 21
0

The answers above are all right; I just wanted to clarify what/where to change with this picture to solve the issue:

Here is the jsfiddle demo

<button onclick="doThat()">
Click
</button>

function doThat() {
    console.log("click happened");
}

enter image description here

mustapha mekhatria
  • 3,495
  • 1
  • 20
  • 26