Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use function declaration with jsfiddle

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)

like image 993
Number8 Avatar asked Dec 08 '22 10:12

Number8


2 Answers

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.

like image 180
abc123 Avatar answered Dec 11 '22 11:12

abc123


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()"
like image 24
epascarello Avatar answered Dec 11 '22 11:12

epascarello