How to call JavaScript function from html

Question

How we can call start() JavaScript function for this case from HTML:

(function() {
 var never, start;
 
 never = function() {
 return alert("try");
 }; 
 start = function() {
 return alert("try harder");
 };
}).call(this);

My HTML

<input type="button" value="press" onclick="never()" ></input>

• povilasp: You should consider converting the script you provided to a class.
• Felix Kling: Exactly like this, but never is not the global and therefore cannot be found.

Answer 1

When you assign event handler code to attributes, any functions that are used need to be available in the global variable scope.

To accomplish this, you can make them properties of window. Currently, your never and start functions are local to the IIFE function scope.

 // IIFE function
(function() {
 // var never, start; // local variables
 // Make the functions globally scoped
 window.never = function() {
 return alert("try");
 }; 
 window.start = function() {
 return alert("try harder");
 };
}).call(this);

---

You can expose a single namespace if you prefer

 // IIFE function
(function() {
 var ns = window.ns = {};
 // Make the functions globally scoped
 ns.never = function() {
 return alert("try");
 }; 
 ns.start = function() {
 return alert("try harder");
 };
}).call(this);

And then change your inline handler to use ns.never(); and ns.start();.

• Mohit Verma: Okay , so we can use this.start() or windows.start() , to call the function , but i m compiling it from coffeescript , & it does not produce this or window along..(also i need to keep scope local)..
• I Hate Lazy: @Moniv: Local scope means the functions will be unreachable. You need to expose them somehow to reach them. Even if they're all in a namespace.
• Mohit Verma: okay , i somehow manage that via local variables also..thanks

Answer 2

First give your input tag an id:

<input id="someInputField" type="button" ... />

Next register a callback on it by executing code when the document is ready:

$(document).ready( function() {
 // define a function called never
 function never() {
 alert( 'Never say never');
 }
 // register a function on the click event handler of that input tag:
 $('#someInputField').click( never );
});

• Shauna: +1 for use of document.ready and unobtrusive JavaScript. OP - even if you don't do this exactly, this is still the type of code you should be striving for. Using the HTML attributes ("onclick", etc) for behaviors is generally frowned upon, for a number of reasons.
• Mohit Verma: this works , but i m compiling it from coffeescript , which produce the same .js as written by me
• I Hate Lazy: @Shauna: So doing onclick="start()" is obtrusive, but somehow it isn't obtrusive to do id="someInputField", and wait for the DOM to load, and manually assign a handler? Either way you're linking code into HTML.
• Shauna: @user1689607 - You seem to misunderstand what unobtrusive JavaScript is. Not only does chubbsondubs' code stay out of the markup, but it also wraps the functions within a closure, keeping it from polluting the global scope. Both of these concepts are integral to the unobtrusive JS paradigm. (Also, assigning an ID isn't required. You can target it through any of the same ways you target elements in CSS.) en.wikipedia.org/wiki/Unobtrusive_JavaScript ibm.com/developerworks/library/wa-aj-unobtrusive
• I Hate Lazy: @Shauna: Yeah, I know what it is. My point is that an ID was being assigned, and when an ID is assigned for that purpose, you're hooking your HTML to your JavaScript. Either way there's HTML pollution. WRT globals, yes that's a problem, which is mostly solved with namespace.

Answer 3

You may find it easier to use a javascript library like jQuery. Using that library you can do this:

<script type="text/javascript">
 $(document).ready(function() {
 var count = 0
 $("#tryme").click(function () {
 if (count == 0) {
 alert('try');
 count++
 }
 else if (count == 1) {
 alert('try harder');
 }
 });
 });
</script>
<input type="button" value="press" id="tryme" ></input>