Doubts in javascript

[winzip]

Here is a javascript function

function gmntFunct(){

	alert('Test'); 
	
	$("#Btn").on('click', function() {
	   alert('Test1');
       
	})
}

here is a HTML snippet

<div class="pull-right">
							<a href="javascript:void();" title="Create New" id="Btn" onclick="gmntFunct" type="button" class="fa fa-plus-circle FA_Ico"></a>
							
   </div>

when I click … I dont get print Test but only Test1

My question

1. function name in html snippet is gmntFunct . Is it correct syntax ? is not it should have been gmntFunct ()

2. I did not get the alert Test when I clicked on html… as you see click code is inside gmntFunct() …so it should call the alert Test defined in gmntFunct() . whats wrong ?

Note: other symbols (jquery ) / notations are standard & implied

[Dormilich]

@winzip

when I click … I dont get print Test but only Test1

That makes no sense with the given code. according to that it should do nothing when clicked.

@winzip

function name in html snippet is gmntFunct . Is it correct syntax ? is not it should have been gmntFunct ()

it is correct syntax, but it doesn’t call the function. for that you’d indeed need the parentheses. but you should use an event listener rather than event attributes anyways.

@winzip

I did not get the alert Test when I clicked on html… as you see click code is inside gmntFunct() …so it should call the alert Test defined in gmntFunct() . whats wrong ?

since the function is not called when you click the link (which should really be a button) there is no alert to be expected.

[winzip]

@Dormilich

it is correct syntax, but it doesn’t call the function. for that you’d indeed need the parentheses.

what it means when we write onclick=“gmntFunct” ?

[Dormilich]

@winzip

what it means when we write onclick=“gmntFunct” ?

that means the same as writing gmntFunct; in plain JS. it’s a valid statement that does nothing.

[winzip]

@Dormilich

it’s a valid statement that does nothing.

valid statement ? you mean onclick=“gmntFunct” is a valid statement for a function which can not be called ?

[Dormilich]

@winzip

you mean onclick=“gmntFunct” is a valid statement

no. an event attribute is not a statement. its value (i.e. gmntFunct) is a statement. and yes, just the function name is a valid statement, although a pointless one.

[winzip]

@winzip

<a href=“javascript:void();” title=“Create New” id=“Btn” onclick=“gmntFunct” type=“button” class=“fa fa-plus-circle FA_Ico”></a>

okay…very nice.

one more thing …when I click on this element

<a href="javascript:void();" title="Create New" id="Btn" onclick="gmntFunct" type="button" class="fa fa-plus-circle FA_Ico"></a>

am I clicking on a button OR on a link ?

I’m confused because its an anchor <a> with an attribute type="button"
…so what is called here ? an anchor or an button ?

[Dormilich]

@winzip

am I clicking on a button or on a link ?

a link/anchor.

@winzip

I’m confused because its an anchor with an attribute type=“button” …so which is called here ?

anchors don’t have a type attribute, so it is completely ignored.

[winzip]

Excellent. It was helpful.

Thanks for your time.

[winzip]

@Dormilich

a link/anchor.

one more doubt …

How click on anchor can call code which is defined inside a function gmntFunct ()
I don’t get this part.

I was expecting the snippet

$("#Btn").on('click', function() {
	   alert('Test1');
       
	})

to be outside the function gmntFunct () to be called upon by anchor click.

[Dormilich]

first, don’t use a link if you don’t link somewhere (i.e. use a button). second, use an event listener.

<button id="Btn" type="button" class="fa fa-plus-circle FA_Ico">Create New</button>

// since you already use jQuery
$("#Btn").on('click', function (evt) {
	alert('Test1');
});

[winzip]

@Dormilich

first, don’t use a link if you don’t link somewhere (i.e. use a button). second, use an event listener.

okay …code modified to this

<button id="Btn" type="button" class="fa fa-plus-circle FA_Ico">Create New</button>

function gmntFunct(){

	alert('Test'); 
	
	$("#Btn").on('click', function (evt) {
	alert('Test1');
        });
       
	
}

But then how it can call Test1 on button click which is defined in gmntFunct () … we are not calling function anyway. …so the confusion

[Dormilich]

you don’t need the gmntFunct() at all. actually it only gets in the way since it adds the same event listener on each call, but you only want one listener.

[winzip]

@Dormilich

actually it only gets in the way since it adds the same event listener on each call, but you only want one listener.

I could not understood . same event listener on each call ?

[Dormilich]

yes, each time you call gmntFunc() it adds one additional handler with the alert for Test1.

[Paul_Wilkins]

@winzip

Here is a javascript function

function gmntFunct(){
	alert('Test'); 
	$("#Btn").on('click', function() {
	   alert('Test1');
	})
}

here is a HTML snippet

<div class="pull-right">
	<a href="javascript:void();" title="Create New" id="Btn" onclick="gmntFunct" type="button" class="fa fa-plus-circle FA_Ico"></a>
</div>

There are a number of code smells here that can be easily taken care of here.

##Code smell #1: Multiple assignment - event handlers

The link assigns one event hander for the button, and that function also assigns another event handler for the button. Each time that you click the button, the Test1 part of the code will run an extra time.

The solution here is to move the event handler assignment outside of the function.

function gmntFunct() {
    alert('Test'); 
}
$("#Btn").on('click', function() {
    alert('Test1');
});

##Code smell #2: Inappropriate coupling - onclick

The inline onclick attribute is a problem because if the behaviour of the code needs to change, that requires you to edit both the html and the JavaScript. It’s better to attach event handlers from the script itself.

<a href="javascript:void();" title="Create New" id="Btn" type="button" class="fa fa-plus-circle FA_Ico"></a>

function gmntFunct() {
    alert('Test'); 
}
$("#Btn").on('click', gmntFunct);

//$("#Btn").on('click', function() {
//    alert('Test1');
//});

If you only want one event handler for the button, the above commented-out code is no longer required.

##Code smell 3: Inappropriate coupling - void()

Preventing the default behaviour used to be done with void() but that doesn’t belong in with the HTML code. Use JavaScript instead to prevent the default behaviour, and leave HTML alone to be just HTML.

<a href="#" title="Create New" id="Btn" type="button" class="fa fa-plus-circle FA_Ico"></a>

One option to prevent the default is to update the parameters in the gmntFunct function to accept the event object.

function gmntFunct(evt) {
    evt.preventDefault();
    alert('Test'); 
}
$("#Btn").on('click', gmntFunct);

The other way which I prefer, is to use a separate handler function, which helps to keep separate this type of behaviour from the function that we want to use.

function gmntFunct() {
    alert('Test'); 
}
function buttonClickHandler(evt) {
    evt.preventDefault();
    gmntFunct();
}
$("#Btn").on('click', buttonClickHandler);

##Code smell #4: Unused code - type attribute

The type attribute is only used on input element, not anchor elements, so that needs to be removed.

<a href="#" title="Create New" id="Btn" class="fa fa-plus-circle FA_Ico"></a>

##Summary

You now have much tidier code that works well, is neatly organised, and allows room for easy growth and maintenance when more code is added.

<a href="#" title="Create New" id="Btn" class="fa fa-plus-circle FA_Ico"></a>

function gmntFunct() {
    alert('Test'); 
}
function buttonClickHandler(evt) {
    evt.preventDefault();
    gmntFunct();
}
$("#Btn").on('click', buttonClickHandler);

Lastly, there are tools such as JSNose that can help to sniff out different cod smells, but it can be more useful to learn about them, such as from this JavaScript Code Smells talk video.