मेरे पास एक जावास्क्रिप्ट फ़ंक्शन है जिसके साथ मैं कुछ घंटों से निपट रहा हूं,

जावास्क्रिप्ट:

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';
    }
}

एचटीएमएल:

<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>

सीएसएस:

.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 आइकन और संगीत बजाता है) लेकिन दूसरी बार जब मैं इसे फिर से क्लिक करता हूं, तो कुछ नहीं होता है। मैंने कंसोल की भी जाँच की, और कोई त्रुटि नहीं।

मैं वास्तव में कुछ मदद की सराहना करता हूं, और शायद सामान्य रूप से कुछ सुझाव। (जावास्क्रिप्ट के लिए नया, अभी jQuery का उपयोग नहीं करना चाहता।)

-1
HorseBob 21 नवम्बर 2021, 00:33
यदि आप "और अगर" को "अन्य" में बदलते हैं और इसकी सशर्त हटाते हैं तो क्या होगा?
 – 
Ryan Millares
21 नवम्बर 2021, 00:36
1
, ठीक ऐसा ही होता है, मैंने कुछ समय पहले ही यह कोशिश की थी, मेरा मानना ​​है कि यह पहली चीज थी जिसे मैंने आजमाया था।
 – 
HorseBob
21 नवम्बर 2021, 00:40
क्या आप अपने अन्य में एक कंसोल.लॉग () डालने का प्रयास कर सकते हैं यदि यह जांचने के लिए कि यह उस ब्लॉक को चला रहा है या नहीं?
 – 
Ryan Millares
21 नवम्बर 2021, 00:43
3
मूल्यों की तुलना करने के लिए आपको दोहरे बराबर चिह्न == की आवश्यकता है; आप इसके बजाय एकल समान चिह्न = का उपयोग कर रहे हैं, जो असाइनमेंट के लिए है, उदा। if (audioState.src == 'images/musicOff.svg') {.
 – 
Decent Dabbler
21 नवम्बर 2021, 00:49
1
एक और बात यह है कि audioState.src स्रोत का पूरा यूआरआई लौटाएगा, इसलिए इसे सापेक्ष यूआरआई जैसे 'images/musicOff.svg' से तुलना करने से कोई मेल नहीं मिलेगा।
 – 
Decent Dabbler
21 नवम्बर 2021, 01:12

2 जवाब

सबसे बढ़िया उत्तर

आप तुलना करने के लिए डबल बराबर का उपयोग करना भूल रहे हैं। = को == में बदलें

audioState.src पूर्ण पथ लौटा रहा है, इसे सभी तुलनाओं पर getAttribute('src') विधि के लिए बदलने का प्रयास करें। उस तरह:

audioState.getAttribute('src') == 'images/musicOff.svg'

और src मान बदलने के लिए, setAttribute('attribute', 'newValue') विधि का उपयोग करने का प्रयास करें उस तरह:

audioState.setAttribute('src', 'images/musicOff.svg');

आशा है कि यह आपकी मदद करेगा

-1
Lucas Mesquita 21 नवम्बर 2021, 01:05
GetAttribute आवश्यक नहीं है, src प्रत्येक ब्राउज़र द्वारा समर्थित एक प्रतिबिंबित संपत्ति है (मुझे लगता है)
 – 
Ryan Millares
21 नवम्बर 2021, 01:09
यह काम किया! सुझाव के लिए धन्यवाद, यह निश्चित रूप से भविष्य में काम आएगा!
 – 
HorseBob
21 नवम्बर 2021, 01:11

आपके उदाहरण के साथ कुछ चीजें चल रही हैं:

  1. मूल्यों की तुलना करने के लिए आपको या तो डबल == (ढीली तुलना) या ट्रिपल === (सख्त तुलना) समान संकेतों का उपयोग करने की आवश्यकता है।
  2. हो सकता है कि आप var audioState = document.getElementById('musicIcon'); को बहुत जल्दी कॉल कर रहे हों, क्योंकि दस्तावेज़ को अभी तक पूरी तरह से पार्स नहीं किया गया है, और इसलिए audioState एलिमेंट के बजाय null होगा।
  3. audioState.src आपके द्वारा मान निर्दिष्ट करने के बाद स्रोत को पूरा 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>
3
Decent Dabbler 21 नवम्बर 2021, 01:27
स्पष्टीकरण के लिए धन्यवाद, मैं वास्तव में इसकी सराहना करता हूं, मैं आपकी विधि का उपयोग कर रहा हूं।
 – 
HorseBob
21 नवम्बर 2021, 01:36