Button not responding to click with JQuery

Question

So I'm new to JQuery and am trying to write a program which returns (console log for testing) the value of a button when it is clicked. For some reason my code does not register when the button is clicked, and additionally I don't think the right value is being parsed for the "car" parameter.

Here is my code (probably more than needed but not sure where I'm going wrong):

$(document).ready(function() {
  $(":button").click(myFunction(this.value));
});

function myFunction(car) {
  selection = car;
  console.log(selection);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" name="newButton" value="Mercedes"> <br>
<input type="button" name="newButton" value="BMW"> <br>
<input type="button" name="newButton" value="Audi">

I expect the program to log the value of the button that is pressed, however it is currently logging nothing.

Thanks

@ControlAltDel He's using input[type=button], not button. — connexo
– connexo, Commented May 9, 2019 at 19:03
$("input[type='button']").on('click', myFunction(this.value)); — Ryan Wilson
– Ryan Wilson, Commented May 9, 2019 at 19:03

Rohit Sharma · Accepted Answer · 2019-05-09 19:13:03Z

4

The problem is you are executing the function there. You should assign it, not execute it.

$(document).ready(function() {
  $(":button").click(myFunction);
});

function myFunction(event) {
  selection = event.target.value;
  console.log(selection);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" name="newButton" value="Mercedes"> <br>
<input type="button" name="newButton" value="BMW"> <br>
<input type="button" name="newButton" value="Audi">

You can use the above way, or better, this way:

$(document).ready(function() {
  $(":button").click(e => myFunction(e.target.value));
});

function myFunction(car) {
  selection = car;
  console.log(selection);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" name="newButton" value="Mercedes"> <br>
<input type="button" name="newButton" value="BMW"> <br>
<input type="button" name="newButton" value="Audi">

edited May 9, 2019 at 19:13

Rohit Sharma

3,3442 gold badges21 silver badges39 bronze badges

answered May 9, 2019 at 19:03

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

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

7 Comments

connexo Over a year ago

You are logging the click event.

Praveen Kumar Purushothaman Over a year ago

@connexo Updated. Check.

Praveen Kumar Purushothaman Over a year ago

@connexo Yep, same here. I have corrected it as soon as I found it.

Praveen Kumar Purushothaman Over a year ago

Not sure why this answer is attracting so many downvotes, in spite of being right. I would be very happy to know the reason behind it.

Rohit Sharma Over a year ago

@PraveenKumarPurushothaman Welcome, I was also shocked that people downvoted instead of editing it due to naming convention :)

|

connexo · Accepted Answer · 2019-05-09 19:15:03Z

0

This is very easy without any help of jQuery:

document.addEventListener('DOMContentLoaded', function() { // native way to do $(document).ready(function() {
  // get a list of all buttons and iterate over it
  for (const btn of document.querySelectorAll('input[type=button]')) {
    // and add a click listener to each one of them
    btn.addEventListener('click', function(event) {
      console.log(btn.value);  
    })
  }
})

<input type="button" name="newButton" value="Mercedes"> <br>
<input type="button" name="newButton" value="BMW"> <br>
<input type="button" name="newButton" value="Audi">

edited May 9, 2019 at 19:15

answered May 9, 2019 at 19:09

connexo

57.2k15 gold badges112 silver badges149 bronze badges

Collectives™ on Stack Overflow

Button not responding to click with JQuery

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related