admin管理员组

文章数量:1324837

My HTML, CSS and JS are all contained within their own files ('index.html', 'javascript.js', 'style.css').

I want to change the background-image of the button to represent its state.

Here are the current snippets I have:

<button id="btn_playPause" type="button" onclick="losAudio_playPause()"></button>

#btn_playPause {
  background-image: url(../contents/img/losAudio_play.png);
  height: 35px;
  width: 35px;
}

And finally, the JavaScript (point of failure)

function losAudio_playPause() {
  var losAudio = document.getElementById("losAudio");
  if (losAudio.paused) {
    losAudio.play();
    document.getElementById("btn_playPause").style.background-image="url(../contents/img/losAudio_pause.png)";
  } else {
    losAudio.pause();
    document.getElementById("btn_playPause").style.background-image="url(../contents/img/losAudio_pause.png)";
  }
}

I am utterly lost as to why the document.getElementByID("btn_playPause").style parts aren't working, and can't find a solution.

My HTML, CSS and JS are all contained within their own files ('index.html', 'javascript.js', 'style.css').

I want to change the background-image of the button to represent its state.

Here are the current snippets I have:

<button id="btn_playPause" type="button" onclick="losAudio_playPause()"></button>

#btn_playPause {
  background-image: url(../contents/img/losAudio_play.png);
  height: 35px;
  width: 35px;
}

And finally, the JavaScript (point of failure)

function losAudio_playPause() {
  var losAudio = document.getElementById("losAudio");
  if (losAudio.paused) {
    losAudio.play();
    document.getElementById("btn_playPause").style.background-image="url(../contents/img/losAudio_pause.png)";
  } else {
    losAudio.pause();
    document.getElementById("btn_playPause").style.background-image="url(../contents/img/losAudio_pause.png)";
  }
}

I am utterly lost as to why the document.getElementByID("btn_playPause").style parts aren't working, and can't find a solution.

• javascript
• css
• html

Share Improve this question Follow edited Dec 13, 2021 at 21:12 Roko C. Buljan 207k4141 gold badges327327 silver badges339339 bronze badges asked Dec 28, 2015 at 2:30 LifeLife 6711 silver badge66 bronze badges 3

• 1 .style.backgroundImage, not style.background-image. – user1106925 Commented Dec 28, 2015 at 2:34
• 1 In this case actually, you should toggle a class on that button and apply different background to different classes in css – Phoenix Commented Dec 28, 2015 at 2:35
• 2 Always, use developer tools and have an eye on Console for possible code (JS) errors. – Roko C. Buljan Commented Dec 28, 2015 at 2:36

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

Audio player with multiple tracks

Here's an example (with a really simple UI) that uses multiple tracks and Play/Pause Icons provided by FontAwesome.
Clicking on a track will pause all ongoing audio tracks and toggle play/pause for the clicked track.

• It reuses one single audio instance using new Audio()
• The actual audio tracks src are stored in every element's data-audio attribute:

;/*SIMPLE AUDIO PLAYER*/(() => {
  // https://stackoverflow./a/34487069/383904
  const AUD = new Audio(),
      BTNS = document.querySelectorAll("[data-audio]");
  
  function playPause() {
    const src = this.dataset.audio;
    if (AUD.src != src) AUD.src = src;
    AUD[AUD.paused ? "play" : "pause"]();
    BTNS.forEach(el => el.classList.remove("pause"));
    this.classList.toggle("pause", !AUD.paused);
  }
  
  AUD.addEventListener("ended", playPause);
  BTNS.forEach(el => el.addEventListener("click", playPause));
})();

[data-audio]{cursor:pointer;}
[data-audio].pause{color: #0ac;}
/*https://fortawesome.github.io/Font-Awesome/cheatsheet/*/
[data-audio]:before{content:"\f144";}
[data-audio].pause:before{content:"\f28b";}

<link href="https://maxcdn.bootstrapcdn./font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" >

<a class="fa"
   data-audio="http://upload.wikimedia/wikipedia/en/4/45/ACDC_-_Back_In_Black-sample.ogg">
   ACDC: Back in Black</a><br>
<a class="fa"
   data-audio="https://upload.wikimedia/wikipedia/en/3/39/Metallica_-_Enter_Sandman.ogg">
   Metallica:Enter Sandman</a><br>
<a class="fa"
   data-audio="https://upload.wikimedia/wikipedia/en/5/5e/U2_One.ogg">
   U2: One</a><br>

---

(Actual Answer:)

1. Don't use inline JS, keep your JS logic in one place
2. Use addEventListener and the correct camelCase style.backgroundImage (or style["background-image"] if you will)
3. (Button is already a "type=button")

    <button id="btn_playPause">Toggle play pause</button>

    var losAudio = document.getElementById("losAudio");
    
    function losAudio_playPause() {
        var isPaused = losAudio.paused;
        losAudio[isPaused ? "play" : "pause"]();
        this.style.backgroundImage="url('img/"+ (isPaused ? "icoPlay" : "icoPause") +".png')";
    }
    
    document.getElementById("btn_playPause").addEventListener("click", losAudio_playPause);

Don't request new images on click! Use a CSS Sprite Image for your element:

and change it's background-position on click:

var audio = document.getElementById("losAudio");
var btn_playPause = document.getElementById("btn_playPause");

function losAudio_playPause() {
  var isPaused = losAudio.paused;
  losAudio[isPaused ? "play" : "pause"]();
  this.style.backgroundPosition= "0 "+ (isPaused ? "-32px":"0px");
  // or use: audio.classList.toggle("pause", isPaused)
}

btn_playPause.addEventListener("click", losAudio_playPause);

#btn_playPause{
  background:url(https://i.sstatic/ENFH5.png) no-repeat;
  border:none;
  width:32px;
  height:32px;
  cursor:pointer;
  outline:none;
}

<audio id="losAudio" src="http://upload.wikimedia/wikipedia/en/4/45/ACDC_-_Back_In_Black-sample.ogg">Audio not supported</audio>
<button id="btn_playPause"></button>

.playPause {
    background-image: url(../contents/img/losAudio_play.png);
    height: 35px;
    width: 35px;
}

.playPlay {
    background-image: url(../contents/img/losAudio_pause.png);
    height: 35px;
    width: 35px;
}

and if no other classes are involved,

document.getElementById("btn_playPause").className = "playPlay";

or

document.getElementById("btn_playPause").className = "playPause"; 

the icons might not be exactly right but I would just change class name instead of messing with the images.

You need to use document.body.style.backgroundImage = "url(...) . Note backgroundImage not background-image which is a css property.

Also it is better to use class rather than inline CSS since inline CSS have highest precedence and it will trouble you if you want to change it Below snippet can help you HTML

<button id="btn_playPause" type="button" onclick="losAudio_playPause()">Click Me</button>

<button id="btn_playPause_add" type="button" onclick="losAudio_AddClass()">Add Class</button>

JS

function losAudio_playPause() {
    var losAudio = document.getElementById("losAudio");
    if (losAudio.paused) {
        losAudio.play();
        document.getElementById("btn_playPause").style.backgroundImage="url(../contents/img/losAudio_pause.png)";
    } else {
        losAudio.pause();
        document.getElementById("btn_playPause").style.backgroundImage="url(../contents/img/losAudio_pause.png)";
    }
}

function losAudio_AddClass() {    // With class
    document.getElementById("btn_playPause_add").classList.add('demoClass');
   }

WORKING DEMO

NOTE: classList.add() is used when you want to have multiple class on an element.Simillarly you can you classList.remove() to remove a class from an element.

This is just demo you can change as required

本文标签： javascriptToggle multiple Audio PlayPauseStack Overflow