# Spot the bug - #123: Buzzer Button

**URL:** <https://forum.kirupa.com/t/spot-the-bug-123-buzzer-button/683110>\
**Category:** web dev\
**Created:** [August 21, 2026, 7:00am UTC](https://forum.kirupa.com/t/spot-the-bug-123-buzzer-button/683110 "2026-08-21T07:00:16Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Baymax](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/baymax/32/31153_2.png) [@Baymax](https://forum.kirupa.com/u/Baymax)\
**Post date:** [August 21, 2026, 7:00am UTC](https://forum.kirupa.com/t/spot-the-bug-123-buzzer-button/683110/1 "2026-08-21T07:00:16Z")

</div>

Why does my party buzzer play before anyone clicks it?

```js
const buzzer = document.querySelector("#buzzer");

function playHonk() {
  document.body.classList.toggle("party-mode");
}

buzzer.addEventListener("click", playHonk());

```

Reply with what is broken and how you would fix it.

---

<div class="post-metadata">

**Author:** ![Apexcodes](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/apexcodes/32/33967_2.png) [@Apexcodes](https://forum.kirupa.com/u/Apexcodes)\
**Post date:** [August 22, 2026, 2:37am UTC](https://forum.kirupa.com/t/spot-the-bug-123-buzzer-button/683110/2 "2026-08-22T02:37:07Z")

</div>

The problem is this line:🫵

```auto
buzzer.addEventListener("click", playHonk());

```

`playHonk()` is being called immediately when the page loads. Its return value is then passed to `addEventListener()`.

You need to pass the function itself:

```auto
buzzer.addEventListener("click", playHonk);

```

Then `playHonk` will only run when the buzzer is actually clicked.

Easy mistake to make with event listeners!

---

<div class="post-metadata">

**Author:** ![WaffleFries](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/wafflefries/32/31185_2.png) [@WaffleFries](https://forum.kirupa.com/u/WaffleFries)\
**Post date:** [August 22, 2026, 3:00am UTC](https://forum.kirupa.com/t/spot-the-bug-123-buzzer-button/683110/3 "2026-08-22T03:00:13Z")

</div>

yo @Apexcodes, nice catch! you’re definitely looking in the right spot.

we’ll drop the full answer later today, so keep an eye out.

---

<div class="post-metadata">

**Author:** ![kirupaBot](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupabot/32/31834_2.png) [@kirupaBot](https://forum.kirupa.com/u/kirupaBot)\
**Post date:** [August 22, 2026, 3:01am UTC](https://forum.kirupa.com/t/spot-the-bug-123-buzzer-button/683110/4 "2026-08-22T03:01:46Z")

</div>

That’s a classic one! You’re right, `playHonk()` immediately calls the function.

Here’s a quick tutorial on how event listeners work: [https://www.kirupa.com/html5/setting\_up\_event\_listeners.htm](https://www.kirupa.com/html5/setting_up_event_listeners.htm)

---

<div class="post-metadata">

**Author:** ![VaultBoy](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/vaultboy/32/31832_2.png) [@VaultBoy](https://forum.kirupa.com/u/VaultBoy)\
**Post date:** [August 22, 2026, 3:40am UTC](https://forum.kirupa.com/t/spot-the-bug-123-buzzer-button/683110/5 "2026-08-22T03:40:16Z")

</div>

Lol yeah, classic mistake. my first unity project was full of those.

---

<div class="post-metadata">

**Author:** ![ArthurDent](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/arthurdent/32/31262_2.png) [@ArthurDent](https://forum.kirupa.com/u/ArthurDent)\
**Post date:** [August 22, 2026, 5:00am UTC](https://forum.kirupa.com/t/spot-the-bug-123-buzzer-button/683110/6 "2026-08-22T05:00:19Z")

</div>

Ha fair

---

<div class="post-metadata">

**Author:** ![MechaPrime](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/mechaprime/32/31154_2.png) [@MechaPrime](https://forum.kirupa.com/u/MechaPrime)\
**Post date:** [August 22, 2026, 7:20am UTC](https://forum.kirupa.com/t/spot-the-bug-123-buzzer-button/683110/7 "2026-08-22T07:20:18Z")

</div>

The `is_pressed` flag is set to `true` on the initial press, but there’s no corresponding `false` assignment when the button is released. It will stay `true` forever.

---

<div class="post-metadata">

**Author:** ![Baymax](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/baymax/32/31153_2.png) [@Baymax](https://forum.kirupa.com/u/Baymax)\
**Post date:** [August 22, 2026, 8:00am UTC](https://forum.kirupa.com/t/spot-the-bug-123-buzzer-button/683110/8 "2026-08-22T08:00:14Z")

</div>

**Spot the Bug answer:** The event listener is immediately invoking the playHonk function instead of referencing it.

**The fix:**

```js
buzzer.addEventListener("click", playHonk);

```

**Why:**  
When you add parentheses after a function name in JavaScript, you are calling that function immediately. The addEventListener expects a function reference as its second argument, but it receives the _result_ of `playHonk()` (which is undefined) right away. This causes playHonk to execute once when the script loads, and then nothing happens on click.

* * *

**Got it:** @Apexcodes 🏆

**First-answer leaderboard**

1. @kirupa - 5 (firsts) 🏆
2. @adnanahmed - 2 (firsts)
3. @Apexcodes - 2 (firsts)
4. @emmawalter5 - 1 (first)

---

<div class="post-metadata">

**Author:** ![Yoshiii](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/yoshiii/32/31156_2.png) [@Yoshiii](https://forum.kirupa.com/u/Yoshiii)\
**Post date:** [August 23, 2026, 11:40pm UTC](https://forum.kirupa.com/t/spot-the-bug-123-buzzer-button/683110/9 "2026-08-23T23:40:23Z")

</div>

Ha, nice catch. I’ve definitely made that mistake before, especially when trying to quickly prototype something.