Getting multiple a sound and countdown timer to work using the same button-CodePudding

So I'm trying to implement sound into my program to where whenever you click the start button, it starts both the sound and the count down at the same time but it only currently starts the time. I've gotten it to work by itself without the timer but every time I try to connect it using addEventListener it just doesn't seem to want to connect to the sound. Does anyone see anything I'm missing or am I using it wrong?

This is my html

    <!DOCTYPE html>
<html>
<head>
<link href="cssstyle.css" rel="stylesheet" type="text/css">
<script src="loopv3.js"></script>
<link href = "Password.html">
</head>

<body>
    <audio id="sound"; src="us-lab-background.mp3"></audio>
<div id="under" style="position: absolute"> 
    <img src="https://cdn.mos.cms.futurecdn.net/M7fDTpDnJcZ4dt3myngzxi.jpg" alt="space background" width="100%" height="100%">  </div> 
<div id="countdowntimer" style="left:44%; top: 105%; position: absolute">
    <p id="countDown"; style = "color:white"> Seconds till Blast Off!</p></div> 
<div id="top" style="left: 41%; top: 60%; position: absolute"> 
    <img src="https://images-platform.99static.com/VMvW_L-joavx2q3oj5fSTZOiGwI=/0x0:1000x1000/500x500/top/smart/99designs-contests-attachments/114/114579/attachment_114579370" alt="UAT Space Logo" width="45%" height="50%">  </div> 
    
<div id="countdowntimer" style="left: 43.5%; top: 110%; position: absolute"><p id = "timer"></p>
    <button onclick=countDown()>Start Countdown!</button>
    
  

        
    
    
    <div id="text" style="left: 20%; top: 97%; position: absolute">
        <b style="color:white">Rocket Launch Timer.</b> 
    </div>

    
    <button id="stopTime" onclick= 'stopCount()'>Stop!</button> 
   
</body>








    </html>

this is my JavaScript

    var timedown
var x = document.getElementById("sound");
x.addEventListener("click", countDown);
x.addEventListener("click", noise )
function countDown(){
var currTime = 55
timedown = setInterval(function() {
    currTime = currTime - 1;
    document.getElementById("countdowntimer").innerHTML ="The time is:"   currTime; 
        if(currTime == 0){
            clearInterval(timedown);
            document.getElementById("countdowntimer").innerHTML = "BLASTOFF!"
        }
        else if(currTime <= 25){
            document.getElementById("countdowntimer").innerHTML = "Half way to launch "   currTime;

        } 
}, 1000);};

function stopCount() {
        clearInterval(timedown)
    };
    function noise() {
        var sound = document.getElementById("countdowntimer");
        sound.play();
      };

CodePudding user response：

You cannot add two eventlisteners on the same element with the same event. The previous one will be discarded. Instead create a new function which will call the other two functions on event. Eg

x.addEventListener("click", ()=>{ countDown(); noise();});

More Information about this is here

CodePudding user response：

First issue - in your function noise(), you have it getting the element "countdowntimer". Remove this all together, and replace sound.play(); with x.play(); as you already define var x = document.getElementById("sound");

Next, create a new function to call both countDown() and noise()

I've replaced the audio in this snippet so I could test it.

var timedown
var x = document.getElementById("sound");
x.addEventListener("click", countDown);
x.addEventListener("click", noise);
var currTime = 55

function activate() {
  countDown();
  noise();
}

function countDown() {
  timedown = setInterval(function() {
    currTime = currTime - 1;
    document.getElementById("countdowntimer").innerHTML = "The time is:"   currTime;
    if (currTime == 0) {
      clearInterval(timedown);
      document.getElementById("countdowntimer").innerHTML = "BLASTOFF!"
    } else if (currTime <= 25) {
      document.getElementById("countdowntimer").innerHTML = "Half way to launch "   currTime;

    }
  }, 1000);
};

function stopCount() {
  clearInterval(timedown)
  x.pause();
};

function noise() {
  x.play();
};

<html>

<head>
  <link href="cssstyle.css" rel="stylesheet" type="text/css">
  <script src="loopv3.js"></script>
  <link href="Password.html">
</head>

<body>
  <audio id="sound" ; src="https://sounds-mp3.com/mp3/0011247.mp3"></audio>
  <div id="under" style="position: absolute">
    <img src="https://cdn.mos.cms.futurecdn.net/M7fDTpDnJcZ4dt3myngzxi.jpg" alt="space background" width="100%" height="100%"> </div>
  <div id="countdowntimer" style="left:44%; top: 105%; position: absolute">
    <p id="countDown" ; style="color:white"> Seconds till Blast Off!</p>
  </div>
  <div id="top" style="left: 41%; top: 60%; position: absolute">
    <img src="https://images-platform.99static.com/VMvW_L-joavx2q3oj5fSTZOiGwI=/0x0:1000x1000/500x500/top/smart/99designs-contests-attachments/114/114579/attachment_114579370" alt="UAT Space Logo" width="45%" height="50%"> </div>

  <div id="countdowntimer" style="left: 43.5%; top: 110%; position: absolute">
    <p id="timer"></p>
    <button onclick='activate()'>Start Countdown!</button>






    <div id="text" style="left: 20%; top: 97%; position: absolute">
      <b style="color:white">Rocket Launch Timer.</b>
    </div>


    <button id="stopTime" onclick='stopCount()'>Stop!</button>

</body>








</html>