Is there a way to write following code inline like so?
<a href="#" onClick="function(){
//do something;
return false;
};return false;"></a>
Instead of doing this:
<a href="#" onClick="doSomething(); return false;"></a>
function doSomething(){
//do something;
}
You can use Self-Executing Anonymous Functions. This code will work:
<a href="#" onClick="(function(){
alert('Hey i am calling');
return false;
})();return false;">click here</a>
This should work:
<a href="#" onclick="function hi(){alert('Hi!')};hi()">click</a>
You may inline any JavaScript inside the onclick as if you were assigning the method through JavaScript. I think is just a matter of making code cleaner keeping your js inside a script block
Based on the answer that @Mukund Kumar gave here's a version that passes the event argument to the anonymous function:
<a href="#" onClick="(function(e){
console.log(e);
alert('Hey i am calling');
return false;
})(arguments[0]);return false;">click here</a>
This isn't really recommended, but you can do it all inline like so:
<a href="#" onClick="function test(){ /* Do something */ } test(); return false;"></a>
But I can't think of any situations off hand where this would be better than writing the function somewhere else and invoking it onClick.
I know this thread is old, but I was looking for a solution to this today. When you're "inlining" JavaScript like below, don't include "function xx()" and such. See the below example. I tested it today, and it works perfectly without console errors or warnings.
Wanted to share a solution:
<a href="#" type="button" onClick="var myDiv = document.getElementById('myDIV'); if (myDiv.style.display === 'block') { myDiv.style.display = 'none'; } else { myDiv.style.display = 'block'; }">click</a>
In a standard HTML markup, the following would be a typical implementation of the "inlined JS" example above.
<body>
<a href="#" type="button" onclick="myFunction()">Try it</a>
...(this is where the rest of the html page content goes)....
<script>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
</body>
doSomethingmultiple times? Declare it once. If you need to associate certain data with the<a>, use adata-*attribute and render information there. And don't set theonclickin the tag - wait for the DOM to be ready, get all<a>elements, and bind a click handler to each, callingdoSomethingand passing it thedata-*attribute you may need.