CODEWITHSUNDEEP
javascriptjqueryhtml
user2669997
user2669997

Reputation:

jQuery cannot get id from $(this) button click

I am trying to use jQuery (this) to get the id of a button clicked and pass that id to a function to do something with. I have three buttons all with different id's and was hoping to use $(this) as I am learning it but cannot get it to work no matter what way I try it This is the code

<html>
<title>QuizMaster</title>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script src="jquery-3.1.0.min.js"></script>
<script>
	function player(x){
		var player = x;
		console.log(player);
	}

	$(document).ready(function(){
		$('#button').click(function(){
			var x = $(this).id;
			player(x);
		});
	});
</script>
</head>
<body>
	<form id='button'>
		<input type='button' id='reset' value='Reset'>
		<input type='button' id='player1' value='Player1'>
		<input type='button' id='player2' value='Player2'>
	</form>
</body>
<html>

Upvotes: 1

Views: 753

Answers (5)

gaetanoM
gaetanoM

Reputation: 42044

You may get the id simply referring to the event.target element. Moreover, you don't need to transform the this keyword to a jQuery object and then apply the .attr method: the short form is: this.id.

The snippet:

$(document).ready(function(){
  $('#button').on('click', function(e){
    var x = e.target.id;
    console.log('button pressed is: ' + x);
  });
});  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id='button'>
		<input type='button' id='reset' value='Reset'>
		<input type='button' id='player1' value='Player1'>
		<input type='button' id='player2' value='Player2'>
</form>

Upvotes: 0

mscdeveloper
mscdeveloper

Reputation: 2889

Maybe Like this:

	function player(x){
		var player = x;
		console.log(player);
	}

	$(document).ready(function(){
		$('#button :button').click(function(){
			var x = $(this).attr('id');
			player(x);
		});
	});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


<form id="button">
		<input type="button" id="eset" value="Reset">
		<input type="button" id="player1" value="Player1">
		<input type="button" id="player2" value="Player2">
</form>

Upvotes: 0

Joseph Stalin
Joseph Stalin

Reputation: 140

you should use like this

$(document).ready(function(){
        $('input[type=button]').click(function(){
            var x = $(this).attr('id')
player(x);
});
    });

Upvotes: 0

Saurabh Mistry
Saurabh Mistry

Reputation: 13669

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<title>QuizMaster</title>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
	function player(x){
		var player = x;
		console.log(player);
	}

	$(document).ready(function(){
		$('input[type="button"]').click(function(){
			var x = $(this).attr('id');
			player(x);
		});
	});
</script>
</head>
<body>
	<form id='button'>
		<input type='button' id='reset' value='Reset'>
		<input type='button' id='player1' value='Player1'>
		<input type='button' id='player2' value='Player2'>
	</form>
</body>
<html>

Upvotes: 0

Tobia
Tobia

Reputation: 9506

I think you should listen to input element not #button. And you should get id with .attr()

$(document).ready(function(){
        $('#button input').click(function(){
            var x = $(this).attr("id");
            player(x);
        });
    });

Upvotes: 1

Related Questions