Question

到目前为止，我已经可以使用所有功能，但是即使我确定将其放在正确的位置，现在也无法使用countDown功能来发出警报。另外，我正在尝试让我的pausePlay类在“开始”按钮消失后出现。

const $startButton = document.getElementById("start");
// Start button
var startTimer = () => {
    $startButton.addEventListener('click', handleClickStartButton, true);
    
};

// Plays audio for start, pause, and play buttons 
 var playAudio = () => {
  const $startSound = document.getElementById("audio");
  const $pauseButton = document.getElementById("pause");
  const $playButton = document.getElementById("play");
  $startSound.play();
  $pauseButton.play();
  $playButton.play();
    };
// What happens after start button is clicked 
var handleClickStartButton = () => {
    $startButton.style.display = "none";
    
    const $pausePlay = document.getElementsByClassName("pausePlay");
    const $pauseButton = document.getElementById("pause");
    const $playButton = document.getElementById('play');
    for (var i = 0; i < pausePlay.length; i++) {
        $pausePlay[i].style.display = "block";
    }
    $pauseButton.addEventListener('click', handleClickPauseButton);
    $playButton.addEventListener('click', handleClickPlayButton);

    playAudio();
    countDown();
 };
 
 function handleClickPauseButton(){
    
 };

function countDown(){
    alert(";nadf");
}


startTimer();

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Pomodoro App</title>
      <link rel="stylesheet" href="styles.css">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
      <link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah" rel="stylesheet">
      <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
   </head>
   <body>
  <div class="background">
    
  </div>
      <div class="header">
         <h1 id="pom-header"><a href="https://francescocirillo.com/pages/pomodoro-technique">Pomodoro</a> App</h1>
      </div>
      <div class="container">
      <div class="buttons">
         <button id ="start" type="button" onclick="playAudio()">Start</button>
         <audio id="audio">
            <source src="clicksound.wav" type="audio/ogg ">
         </audio>
         <audio id="timer">
            <source src="gong.mp3" type="audio/ogg ">
         </audio>
      </div>
      <div id="middle">
         <div id="counter"></div>
         <div class="pausePlay" style="display:none">
            <div class="row mr-3">
               <button id="pause" onclick="playAudio()">
                  <i class="fas fa-pause" style="font-size: 40px"></i>
                  <!-- <i class="fas fa-pause" style="font-size: 40px"></i> -->
               </button>
               <button id="play" onclick="playAudio()">
               <i class="fas fa-play" style="font-size: 40px"></i>
               </button>
            </div>
         </div>
         <div class="middleButtons" style="display: none">
            <div class="row mr-3">
               <button id="fiveMin" onclick="playAudio()">
                  <h1>5 Min Break</h1>
               </button>
               <button id="redo" onclick="playAudio()">
                  <h1>Restart</h1>
               <button id="endSess" onclick="playAudio()">
                  <h1>End Session</h1>
               </button>
            </div>
         </div>
      </div>
      <script src="app.js"></script>
      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
   </body>
</html>

如何使功能在ES6上协同工作？

0 个答案: