0

I am making a Simon game, but I need to get the "id" (attribute) value. but whenever I click on the different color it still gives me the first attr value which is in this case is green. how many times do I click on the red, blue, or yellow button but it still gives me a green value (the first one). help, please!

//Below code HTML

<div class="container">
      <button class="btn green" id="green"></button>
      <button class="btn red" id="red"></button><br />
      <button class="btn yellow" id="yellow"></button>
      <button class="btn blue" id="blue"></button>
    </div>

//Below code Jquery

$(".btn").click(function () {
    var userChosenColor =$(".btn").attr("id");
    console.log(userChosenColor);
});
bitee
  • 57
  • 7
  • 1
    Did you mean `$(this).attr("id")`? You use nothing specific to the clicked button in the function. Why are you surprised that `$(".btn")` has exactly the same result, not matter _where_ it’s called? The [documentation](//api.jquery.com/attr#attr1) also explains how `.attr` works. – Sebastian Simon Feb 14 '22 at 22:55
  • 1
    ```$(this).attr('id')``` or ```this.id```, you need to reference the actual button clicked. – prettyInPink Feb 14 '22 at 22:59
  • Use [event delegation](//developer.mozilla.org/docs/Learn/JavaScript/Building_blocks/Events#Event_delegation) instead of adding several event listeners — it’s more maintainable and applies to dynamically added elements. See [the tag info](/tags/event-delegation/info) and [this Q&A](/q/1687296/4642212). Use the second selector argument in jQuery’s [`.on`](//api.jquery.com/on): `$(".container").on("click", ".btn", function(){ console.log($(this).attr("id")); });`. – Sebastian Simon Feb 14 '22 at 22:59
  • @SebastianSimon Delegation shouldn't be used unless the elements are actually added dynamically, it has potential issues of its own. "more maintainable" is debatable, to each their own. – Barmar Feb 14 '22 at 23:01

1 Answers1

1

Reference to the button clicked. You do not necessarily need jQuery for this.

$(".btn").click(function () {
    var userChosenColor = $(this).attr("id");
    console.log('jQuery: '+ userChosenColor);
});

/* non jQuery */
const btns = document.querySelectorAll('.btn');

btns.forEach(btn=> {
  btn.addEventListener('click', () => {
    console.log('JS only: '+btn.id)
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <button class="btn green" id="green">1</button>
  <button class="btn red" id="red">2</button><br />
  <button class="btn yellow" id="yellow">3</button>
  <button class="btn blue" id="blue">4</button>
</div>
prettyInPink
  • 3,291
  • 3
  • 21
  • 32
  • i am pushing my clicked data in array but only showing me numbers how many time i clicked not the data. why? help! 'var userClickedPattern = []; $(".btn").click(function () { var userChosenColor = $(this).attr("id"); console.log(userClickedPattern.push(userChosenColor)); });' – bitee Feb 14 '22 at 23:53
  • Please add a new question, as this is a different issue. Thanks. – prettyInPink Feb 15 '22 at 09:31