我有一個 Javascript 函式，我處理了幾個小時，
Javascript：
var musicFile = new Audio('audio/Ice.mp3');
var audioState = document.getElementById('musicIcon');
function music() {
if (audioState.src = 'images/musicOff.svg') {
musicFile.play();
audioState.src = 'images/musicOn.svg';
} else if(audioState.src = 'images/musicOn.svg') {
musicFile.pause();
musicFile.currentTime = 0;
audioState.src = 'images/musicOff.svg';
}
}
HTML：
<ul class="tabs" style="top: 0px; right: 0px; width: 210px; right: 10px; text-shadow: 1px 1px indigo;">
<li class="tab" onclick="music()">
<img id="musicIcon" src="images/musicOff.svg" width="32" height="32">
</li>
</ul>
CSS：
.tabs {
position: absolute;
display: flex;
list-style-type: none;
margin: auto;
padding: 0px;
width: 800px;
height: 30px;
}
.tab {
position: relative;
top: 30%;
width: 15%;
height: 20px;
background:royalblue;
border: 0px transparent;
border-radius: 10px;
padding: 10px;
margin: 0px;
margin-right: 15px;
text-align: center;
font-size: 16px;
font-family: monospace;
color: white;
cursor: pointer;
}
.tab:hover {
text-align:center;
background-color: #CCC;
}
該<li>標簽旨在充當按鈕，它執行功能中的所有操作（更改 .svg 圖示并播放音樂），但是我第二次再次單擊它時，沒有任何反應。我還檢查了控制臺，沒有錯誤。
我真的很感激一些幫助，也許還有一些一般的提示。（Javascript 新手，現在不想使用 jQuery。）
uj5u.com熱心網友回復：
你的例子有幾件事：
- 要比較值，您需要使用雙
==（松散比較）或三重===（嚴格比較）等號。 - 可能是您呼叫
var audioState = document.getElementById('musicIcon');得太早了，因為檔案尚未完全決議，因此audioState將是null, 而不是元素。 audioState.src在您為其分配值后，將向源回傳完整的 URI。因此，將其與相對 URI 進行比較將不匹配。
這是一個作業示例，將它們放在一起（我省略了音頻檔案部分）：
var audioState;
// create absolute URIs from relative URIs of the images, resolved against document.documentURI
var imageOffUri = new URL('images/musicOff.svg', document.documentURI);
var imageOnUri = new URL('images/musicOn.svg', document.documentURI);
function music() {
if (audioState.src == imageOffUri) {
audioState.src = imageOnUri;
console.log('turned on');
} else if(audioState.src == imageOnUri) {
audioState.src = imageOffUri;
console.log('turned off');
}
}
// wait for the document to be fully parsed
document.addEventListener('DOMContentLoaded', function() {
audioState = document.getElementById('musicIcon');
});.tabs {
position: absolute;
display: flex;
list-style-type: none;
margin: auto;
padding: 0px;
width: 800px;
height: 30px;
}
.tab {
position: relative;
top: 30%;
width: 15%;
height: 20px;
background:royalblue;
border: 0px transparent;
border-radius: 10px;
padding: 10px;
margin: 0px;
margin-right: 15px;
text-align: center;
font-size: 16px;
font-family: monospace;
color: white;
cursor: pointer;
}
.tab:hover {
text-align:center;
background-color: #CCC;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul class="tabs" style="top: 0px; right: 0px; width: 210px; right: 10px; text-shadow: 1px 1px indigo;">
<li class="tab" onclick="music()">
<img id="musicIcon" src="images/musicOff.svg" width="32" height="32">
</li>
</ul>
</body>
</html>uj5u.com熱心網友回復：
您忘記使用 double 等于進行比較。更改=為==
audioState.src正在回傳絕對路徑，嘗試為getAttribute('src')所有比較的方法更改它。像那樣：
audioState.getAttribute('src') == 'images/musicOff.svg'
并更改src值，嘗試使用這樣的setAttribute('attribute', 'newValue')方法：
audioState.setAttribute('src', 'images/musicOff.svg');
希望對你有幫助
uj5u.com熱心網友回復：
您正在使用=的替代==或===因此改變
audioState.src = 'images/musicOff.svg'
到
audioState.src == 'images/musicOff.svg'
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/361708.html
標籤：javascript html css
上一篇：在影像下獲取標題時遇到問題