Question

jQuery:

$("#direction").click(function() {
    var direction = $(this).text();
    alert(direction);
}

HTML

<button id="direction">South</button>
<button id="direction">North</button>

Only the first button alerts the text. I don’t understand why. How can I fix this?

Answer 1

You can’t have two elements with the same id, what you could do is give them the same class and then add the event handler on that.

Example:

<button class="directionBtn">South</button>
<button class="directionBtn">North</button>

$(".directionBtn").click(function() {
                var direction = $(this).text();
                alert(direction);
});