Why is it that every time I press the play button, nothing happens?

Question

Why is it that every time I press the play button, nothing happens?

When I try to click on the play button, it does not start playing. I suspect there is something that needs to be adjusted in the javascript. Can someone please assist me in fixing this issue?

Link to the example

View Screenshot

<script>
  (function iife() {
    "use strict";

    document.querySelector(".myLink1").classList.add("hide");
    var playButton = document.querySelector(".playButton1");
    playButton.addEventListener("click", firstClick);

    function firstClick() {
      document.querySelector(".myLink1").classList.remove("hide");
      var button = document.querySelector(".playButton1");
      var player = document.querySelector("#player1");
      document.querySelector('.playButton1 .initial1').style.display = 'none';
      playButton.addEventListener("click", playButtonClickHandler);
      document.querySelector(".playButton1 .play1").style.display = "inline-block";
      document.querySelector(".playButton1 .pause1").style.display = "none";
      button.classList.add("playing");
    }

    function playButtonClickHandler() {

      player.volume = 1.0;

      if (player.paused) {
        document.querySelector(".playButton1 .play1").style.display = "none";
        document.querySelector(".playButton1 .pause1").style.display = "inline-block";
        player.play();
      } else {
        document.querySelector(".playButton1 .play1").style.display = "inline-block";
        document.querySelector(".playButton1 .pause1").style.display = "none";
        player.pause();
      }
    }

  }());

</script>

javascript css

Answer 1

Answer №1

Modification

<audio id="player1" preload="none">

adjust to

<audio id="player" preload="none">

OR

Declare "var player" in the global scope and eliminate the "var" in "var player = document.querySelector("#player1"); "

Alternatively, you can transfer "var player = document.querySelector("#player1"); " to the global scope.

You can also move "var player = document.querySelector("#player1") inside the function playButtonClickHandler(){...

Or consider manipulating your player object using the built-in automatic function "document.getElementByID" provided by your browser (note: compatibility may vary between browsers)

Replace the following

player.volume = 1.0;
player.play();
player.pause();

with

player1.volume = 1.0;
player1.play();
player1.pause();

You may also utilize the commonly used method for accessing DOM elements:

Update the following

player.volume = 1.0;
player.play();
player.pause();

to

document.getElementById("player1").volume = 1.0;
document.getElementById("player1").play();
document.getElementById("player1").pause();

Answer 2

Modification

<audio id="player1" preload="none">

adjust to

<audio id="player" preload="none">

OR

Declare "var player" in the global scope and eliminate the "var" in "var player = document.querySelector("#player1"); "

Alternatively, you can transfer "var player = document.querySelector("#player1"); " to the global scope.

You can also move "var player = document.querySelector("#player1") inside the function playButtonClickHandler(){...

Or consider manipulating your player object using the built-in automatic function "document.getElementByID" provided by your browser (note: compatibility may vary between browsers)

Replace the following

player.volume = 1.0;
player.play();
player.pause();

with

player1.volume = 1.0;
player1.play();
player1.pause();

You may also utilize the commonly used method for accessing DOM elements:

Update the following

player.volume = 1.0;
player.play();
player.pause();

to

document.getElementById("player1").volume = 1.0;
document.getElementById("player1").play();
document.getElementById("player1").pause();

Answer 3

Answer №2

The issue here is that the player variable is only available within the firstClick function, but you are trying to utilize it in the playButtonClickHandler function.

To resolve this, you can declare the variable in a scope that both functions can access. For instance:

(function iife() {
"use strict";

    ......

    var player = document.querySelector("#player1");

    function firstClick() {
       .....
    }

    function playButtonClickHandler() {
       // The variable "player" is now accessible here.
       .....
    }

}());

Answer 4

The issue here is that the player variable is only available within the firstClick function, but you are trying to utilize it in the playButtonClickHandler function.

To resolve this, you can declare the variable in a scope that both functions can access. For instance:

(function iife() {
"use strict";

    ......

    var player = document.querySelector("#player1");

    function firstClick() {
       .....
    }

    function playButtonClickHandler() {
       // The variable "player" is now accessible here.
       .....
    }

}());

Why is it that every time I press the play button, nothing happens?

Answer №1

Answer №2

Similar questions

Tips on incorporating variable tension feature into D3 hierarchical edge bundling

When employing the map function in React, the resulting array is always equal to the last element within

How can a div's height be adjusted based on the content of one sub div but not the other?

Rotate the image as you swipe left or right with Angular's ng-swipe-left and ng-swipe-right features

An error occurred as the Serverless Function timed out while attempting to load a dynamic route in Next.js version 13

React error message: "Cannot update state on a component that is not mounted" unless using the useEffect hook

What is an alternative way to show the contents of a JSON file without directly accessing it

Identify the individual who accessed a hyperlink within an email

What is the best way to refresh or render a list in a React application?

Steps for creating a fixed menu bar that remains stationary while scrolling

Display MySQL data in a Jade/Pug view by separating it into different sections

Creating an embedded link to a website that adjusts to different screen sizes while also dynamically changing

yet another scenario where the component's state changes without the component reflecting those changes

Looking to showcase website HTML code by simply clicking on a banner image?

Having trouble with IE7 - unable to interact with elements below popup form

How to position one div next to another using CSS and HTML

Ways to continuously execute a JavaScript click event

What could be the reason for the absence of definition for 'res'?

The header one tag does not wrap around content when the window size is adjusted; instead, it

Ways to customize the appearance of a react-chartist component