Different behaviour of javascript and jquery

Question

I have a button and I am changing its value and name on click showing same value in alert. Its working fine when I use jQuery but not when I use call function with JavaScript function value is not changing in front view but in alert value is changing its totally strange.

Here are the demos

JavaScript

function change() {
  if ($(this).attr('name') == 'first') {
    $(this).attr('name', 'second');
    $(this).attr('value', 'second');
    alert('new name ' + $(this).attr('name'));
  } else {
    $(this).attr('name', 'first');
    $(this).attr('value', 'first');
    alert('new name ' + $(this).attr('name'));
  }
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="submit" id="button" value="first" name="first" onclick="change()">

jQuery

$('#button').click(function() {
  if ($(this).attr('name') == 'first') {
    $(this).attr('name', 'second');
    $(this).attr('value', 'second');
    alert('new name ' + $(this).attr('name'));
  } else {
    $(this).attr('name', 'first');
    $(this).attr('value', 'first');
    alert('new name ' + $(this).attr('name'));
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="submit" id="button" value="first" name="first">

I know I can use jQuery as I am already including the library but I so much wanted to know what is the difference between these two.

Just a suggestion: Use val("value") instead of attr("value","value") — user6360214
– user6360214, Commented Jul 12, 2016 at 12:42
@GauravAggarwal You are just setting the attribute. It doesn't change the value. — Praveen Kumar Purushothaman
– Praveen Kumar Purushothaman, Commented Jul 12, 2016 at 12:44
@Sree i know and i already mentioned in question i am including jquery for both but its all about calling function by jQuery or javascript — Gaurav Aggarwal
– Gaurav Aggarwal, Commented Jul 12, 2016 at 12:45

Dhara Parmar · Accepted Answer · 2016-07-12 12:51:23Z

4

You need to pass this to change function so that you can access the clicked object inside that function, .click() event of any element will automatically detect $(this) but in function you need to pass it

Pass this in change() function in button:

<input type="submit" id="button" value="first" name="first"  onclick="change(this)">

So change function will have:

function change(obj) {
  if ($(obj).attr('name') == 'first') {
    $(obj).attr('name', 'second');
    $(obj).attr('value', 'second');
    alert('new name ' + $(obj).attr('name'));
  } else {
    $(obj).attr('name', 'first');
    $(obj).attr('value', 'first');
    alert('new name ' + $(obj).attr('name'));
  }
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="submit" id="button" value="first" name="first"  onclick="change(this)">

edited Jul 12, 2016 at 12:51

answered Jul 12, 2016 at 12:42

Dhara Parmar

8,1231 gold badge19 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rhumborl Over a year ago

Explanation being, change() is bound (sets "this") to the window, not the button, so you need to pass it to the function to access it. In the second example, jquery binds the function to the button, so $(this) is as you expect

Dhara Parmar Over a year ago

@GauravAggarwal You need to pass this to change function so that you can access the clicked object inside that function...click event of any element will automatically detect $(this).. but in function you need to pass it

Mahmoud Shaaban · Accepted Answer · 2016-07-12 12:50:13Z

passing 'this' to the function and using it instead of 'this' inside the function solves your problem.

because using 'this' inside a function not handled by Jquery event, returns the owner of the function that is an object of the button you have while in jquery it returns a jQuery object

function change(btn){
	if($(btn).attr('name') == 'first'){
  	$(btn).attr('name','second');
    $(btn).attr('value','second');
    alert('new name '+$(btn).attr('name'));
  } else {
  	$(btn).attr('name','first');
  	$(btn).attr('value','first');
    alert('new name '+$(btn).attr('name'));
  }
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="submit" id="button" value="first" name="first"  onclick="change(this)">

Collectives™ on Stack Overflow

Different behaviour of javascript and jquery

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related