How to let alert happen only once in a for loop using js?

Question

I am trying to use a button to pause the audio element, and the function works fine except the alert() function. The alert just pop up and stays on the top of the website forever.
here is my HTML code

<button id="threeSecTimer">3s</button>

 <figcaption>Fire</figcaption>
      <audio controls loop>
        <source src="xxx" type="audio/mpeg" />
        Your Browser doesn't support the audio
      </audio>

 <figcaption>Forest</figcaption>
      <audio controls loop>
        <source src="xxx" type="audio/wav" />
        Your Browser doesn't support the audio
      </audio>

here is js

var threeSecTimer = document.getElementById("threeSecTimer");

var allMusic = document.getElementsByTagName("audio");

  function pause3s(e) {
    setTimeout(function () {
      for (var i = 0; i < allMusic.length; i++) {
        if ((allMusic[i] = e.target)) {
          allMusic[i].pause();
          allMusic[i].currentTime = 0;
          alert("time is up!");
        }
      }
    }, 3000);
  }

threeSecTimer.addEventListener("click", pause3s);```

alert pauses the execution until the user clicks on it, this is normal behavior — Cid, Dec 18 '21 at 09:25
and please indent your code, it will help (you and others) reading it — Cid, Dec 18 '21 at 09:26
@Cid I clicked the ok button in the alert, the alert is still there — Qiyuan Liu, Dec 18 '21 at 23:47

score 1 · Answer 1 · answered Dec 18 '21 at 09:26

1

You have missed an = in your if condition, change (allMusic[i] = e.target) to (allMusic[i] == e.target)

answered Dec 18 '21 at 09:26

Saeed Shamloo

6,199
1
7
18

Thanks for your answer, tried that and still doesn't work – Qiyuan Liu Dec 18 '21 at 23:49

raphael · Answer 2 · 2021-12-19T00:26:32.070

Your condition, (allMusic[i] == e.target) will never be true since e.target is targeting the 3s button, and allMusic[i] is the audo control. That is assuming you changed the single = to a ==, otherwise the condition will always be true, which is not what you want either, but would lead to the alert button popping up twice, once for each audio control. And when the alert is clicked it should disappear, at least it did for me when I tried out your code.

Perhaps you can check HTML5 check if audio is playing? to target the audio that is playing.

How to let alert happen only once in a for loop using js?

2 Answers2