我的 Javascript 代码无法正常工作

Question

 var audio, playbtn, mutebtn, seek_bar; function initAudioPlayer() { audio = new Audio(); audio.src = "nineDays.mp3"; audio.loop = true; audio.play(); // Set object references playbtn = document.getElementById("playpausebtn"); mutebtn = document.getElementById("mutebtn"); // Add Event Handling playbtn.addEventListener("click", playPause); mutebtn.addEventListener("click", mute); // Functions function playPause() { if (audio.paused) { audio.play(); playbtn.style.background = "url(video_pause.png) no-repeat"; } else { audio.pause(); playbtn.style.background = "url(play.png) no-repeat"; } } function mute() { if (audio.muted) { audio.muted = false; mutebtn.style.background = "url(speaker.png) no-repeat"; } else { audio.muted = true; mutebtn.style.background = "url(mute.png) no-repeat"; } } } window.addEventListener("load", initAudioPlayer);

 body { background: #282828; color: white; font-family: sans-serif; } .nav { display: flex; justify-content: flex-end; position: absolute; width: 100%; top: 0; left: 0; list-style-type: none; } li a { color: white; text-decoration: none; padding: 0 10px; } h1 { font-size: 13px; margin-bottom: 80%; margin-right: 50%; font-family: 'Montserrat'; } .container { padding-top: 8%; } button { border: none; cursor: pointer; outline: none; } button#playpausebtn { background: url(video_pause.png) center center no-repeat; background-size: cover; margin-left: 20px; marging-top: 35px; width: 20px; height: 15px; } button#mutebtn { background: url(speaker.png) center center no-repeat; background-size: cover; margin-top: 35px; width: 25px; height: 20px; } .soundNav { position: absolute; width: 20%; height: 30px; z-index: 99999; }

 <body> <div class="soundNav"> <button id="playpausebtn"></button> <button id="mutebtn"></button> </div> <ul class="nav nav-tabs"> <li role="presentation"><a href="Final%20project.html">Home</a> </li> <li role="presentation"><a href="page2.html">About me</a> </li> <li role="presentation" class="active"><a href="page3.html">Work</a> </li> <li role="presentation"><a href="contactme.html">Get In Touch</a> </li> </ul> <div class="container"> <div class="row"> <div class="col-sm-12"> <div id="my-slider" class="carousel slide" data-ride="carousel"> <!--Indicators dot nav--> <ol class="carousel-indicators"> <li data-target="#my-slider" data-slide-to="0" class="active"></li> <li data-target="#my-slider" data-slide-to="1"></li> <li data-target="#my-slider" data-slide-to="2"></li> <li data-target="#my-slider" data-slide-to="3"></li> </ol> <!--wrapper for slides--> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="1.jpg" alt="Ed Sheeran Concert, Blossom Center, August2016" /> <div class="carousel-caption"> <h1> © Ed Sheeran Concert at Blossom Center</br> August 2015 </h1> </div> </div> <div class="item"> <img src="5.jpg" alt="Ed Sheeran Concert, Blossom Center, August2016" /> <div class="carousel-caption"> <h1> </br> </h1> </div> </div> <div class="item"> <img src="6.jpg" alt="Ed Sheeran Concert, Blossom Center, August2016" /> <div class="carousel-caption"> <h1> </br> </h1> </div> </div> <div class="item "> <img src="2.jpg" alt="Ed Sheeran Concert, Blossom Center, August2016" /> <div class="carousel-caption"> <h1> </h1> </div> </div> <!--controls or next and prev buttons--> <a class="left carousel-control" href="#my-slider" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#my-slider" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> </div> </div> </div> </div> </div> </body> </html>

I am trying to understand what the problem is- whenever someone opens the page, the music starts.我试图了解问题是什么 - 每当有人打开页面时，音乐就会开始。 I want the user to be able to pause or mute the music whenever they want to.我希望用户能够随时暂停或静音音乐。 And that works fine, except my icons won't show, it's as they are hidden.这工作正常，除了我的图标不会显示，因为它们被隐藏了。 Everything is in the same folder.一切都在同一个文件夹中。 I was thinking to use glyphicons, but I don't know how to use them inside of the javascript.我想使用字形，但我不知道如何在 javascript 中使用它们。

Answer 1

the javascript style syntax is littlebit different. javascript 风格的语法有点不同。 use用

mutebtn.style.backgroundImage = "url('mute.png') no-repeat";

and make sure ./mute.png exists and is readable并确保 ./mute.png 存在且可读

我的 Javascript 代码无法正常工作

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-05-03 15:56:22

我的 Javascript 代码无法正常工作

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-05-03 15:56:22

解决方案1
0 已采纳 2016-05-03 15:56:22