Why would you call up a function in the body of html vs javaScript example is function (c)?

Question

Example is in the body:

<div id="red" class="letter" onclick="Food('spaghetti');"></div>

then calling it later in a script section of html as:

function Food(c) {
   var canvas = document.getElementById('myCanvas'); 
   ctx.strokeStyle = c;
   ctx.fillStyle = c;

Why wouldn't you call it in javaScript instead?

I've not found anything on this topic yet.

its just a question of the style you prefer...you also could use a js-side clickhandler `document.getElementById("red").addEventHandler("onclick", function(){})` — messerbill, Apr 07 '16 at 14:39
Possible duplicate of [Difference between obtrusive and unobtrusive javascript](http://stackoverflow.com/questions/8392374/difference-between-obtrusive-and-unobtrusive-javascript) — Professor Allman, Apr 07 '16 at 14:39
Possible duplicate of [Why is using onClick() in HTML a bad practice?](http://stackoverflow.com/questions/5871640/why-is-using-onclick-in-html-a-bad-practice) — yachaka, Apr 07 '16 at 14:52

score 1 · Answer 1 · answered Apr 07 '16 at 14:53

Not able to understand by

Why wouldn't you call it in javaScript instead?

<div id="red" class="letter" onclick="Food('spaghetti');"></div> // Inline Event Handler

Alternative using jQuery

$("#id").on('click',function(event){
 //Rest of code
})

Alternative using native javascript

var _getElement = document.getElementById('red');
_getElement.addEventListener('click',function(event){
 //Rest of code
})

All these steps are correct but none of them are best unless you start thinking about unobstrutive & obtrusive javaScript.

probably this answer

Why would you call up a function in the body of html

But experienced developer avoid this method. Earlier version of IE (<9) use to recognize element.attachEvent instead of addEventListener

score 0 · Answer 2 · answered Apr 07 '16 at 14:40

Both are correct, there are many cases that one is just easier/more understandable and readable than the other. For example if the element is populated after page load you'll need to bind it with the .on method, instead you can just put the function call in onclick like in the example

Dave Newton · Answer 3 · 2016-04-07T14:50:52.247

Are you asking why you write it all in the onclick handler? Because you care about readable HTML, and it's a larger function than will fit it any meaningful way.

I wouldn't even put the onclick attribute, instead, roughly:

<div id="red" class="letter" data-food="spaghetti"></div>

Instead create the click handler function, attach it to the element, and put the argument in the element's dataset, roughly:

function foodHandler(e) {
    var food = e.target.dataset["food"];
    alert(food);
}

document.getElementById("red").addEventListener("click", foodHandler);

(I'd properly namespace the handler function etc.)

Running example

(All this said, I'm not really opposed to putting short stuff in the HTML despite all the cries for unobtrusive JS. Current JS frameworks mix everything up anyway, because everything is tightly coupled. The difference is that they do it in a normalized, conventional way.)

Why would you call up a function in the body of html vs javaScript example is function (c)?

3 Answers3