Why Click event does not work in audio tag [duplicate]

Question

I want to fire a function name shake dots when clicked in audio apparently it does not fire here is the code

   <div class="lyric-word">
                  <span class="sho">.</span>
                  <span class="sho">.</span>
                  <span class="sho">.</span>
                  <span class="sho">.</span>
                  <span class="sho">.</span>
                  <span class="sho">.</span>
            </div>      
<div class="btm">
            <audio id="thisaudio" onclick="shakeDots()" src="https://pagalworld.com.mx/wp-content/uploads/2023/02/Until-I-Found-You.mp3"
                  controls controlsList="nodownload noplaybackrate"></audio>
      </div>

JS

   function shakeDots() {
            const $click= document.querySelectorALL('.shok');
            $click.classList.add('shak'); 
            console,log("Clicked")
        }

Thanks

You'll need to iterate over the $click variable and add to the classList of each element. Also, because spans are inline elements they might not be easily clickable. — admcfajn
– admcfajn, Commented Jan 3 at 18:41
could you elaborate further I mean i need to apply for each ?. I apparenty did that as well but didn't work. — Alsiro Mira
– Alsiro Mira, Commented Jan 3 at 18:45
In additional to the linked duplicate, you also have a typo: querySelectorALL is not a function. JavaScript is case-sensitive. This is a good time to start looking at your browser's development tools, where you can see error messages on the console. (Edit: You have another typo here: console,log) — David
– David, Commented Jan 3 at 18:48
@AlsiroMira: "is there any solution for me here ?" - Yes. Start by reading and understanding the linked duplicates. Then start your attempt again, writing and validating one piece of functionality at a time. (e.g. (1) Invoking an event handler; (2) querying the DOM for matching elements; (3) updating the classes on those elements; (4) logging to the console; etc.) If you encounter a specific problem in any step of that attempt and need help, focus on that one problem in a new question. — David
– David, Commented Jan 3 at 18:58
@AlsiroMira: "my question was to click audio and fire a function." - Yes, we're aware of what you're trying to do. And we've pointed out multiple typos and made multiple suggestions. You are encouraged to assimilate that information into your attempt. — David
– David, Commented Jan 3 at 18:59

Imrane Aabbou · Accepted Answer · 2025-01-06 14:54:07Z

-1

i think onclick event wouldn't be efficient to reach what you are looking for maybe instead you should use onplay/onpause. if you insisted on using onclick you can attach it to an overlay element that comes after the audio tag but also under the same parent something like the following:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title></title>
  </head>
  <body>
    <div class="audio">
      <audio src="./astral-creepy-dark-logo-254198.mp3" controls></audio>
      <div class="audio__overlay"></div>
    </div>

    <script>
      document.querySelector(".audio")
        .addEventListener("click", function (e) {
          // jquery code goes here
        });
    </script>
    <style>
      .audio {
        position: relative;
      }
      .audio__overlay {
        position: absolute;
        height: 100%;
        width: 100%;
        inset: 0;
        /*pointer-events: none;*/
      }
    </style>
  </body>
</html>

that will prevent you from hitting the native audio element and fire an event of your own. if you wanna do specific action on the audio element you can then query it and fire it manually.

edited Jan 6 at 14:54

answered Jan 3 at 18:44

Imrane Aabbou

13 bronze badges

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

1 Comment

Alsiro Mira Jan 3 at 18:48

I applied that to btm onclick but it only came effect when i clicked outside of the audio element

Collectives™ on Stack Overflow

Why Click event does not work in audio tag [duplicate]

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related