मेरे द्वारा बनाए गए वेब पेज पर, मेरे पास चार मुख्य बटन हैं जिनके साथ उपयोगकर्ता इंटरैक्ट कर सकता है: - होम: उपयोगकर्ता को वेबसाइट होम पेज पर रीडायरेक्ट करता है - ट्विटर: ट्विटर प्रमाणीकरण प्रक्रिया के माध्यम से उपयोगकर्ता लेता है - स्पॉटिफाइ: स्पॉटिफा प्रमाणीकरण प्रक्रिया के माध्यम से उपयोगकर्ता लेता है - अगला : उपयोगकर्ता को एक नए वेब पेज पर रीडायरेक्ट करेगा

मेरा लक्ष्य "अगला" बटन को तभी सक्षम करना है जब उपयोगकर्ता कम से कम एक बार "ट्विटर" और "Spotify" पर क्लिक करे।

मैंने कुछ जावास्क्रिप्ट फ़ंक्शंस बनाए हैं जो ट्रैक करते हैं कि उपयोगकर्ता ने कितनी बार ट्विटर और स्पॉटिफ़ बटन पर क्लिक किया है ताकि वे उन बटनों को कम से कम एक बार क्लिक करने के बाद अगला बटन सक्षम कर सकें। इसकी कार्यक्षमता थोड़ी भद्दी है और मुझे यकीन नहीं है कि क्यों। ऐसा लगता है कि फ़ंक्शन मेरे द्वारा चलाए जा रहे स्थानीय स्टोरेज वेरिएबल्स को ठीक से अपडेट नहीं कर रहा है जो बदले में नेक्स्ट बटन के कार्यात्मक रूप से सक्षम/अक्षम को गड़बड़ कर देता है।

मेरे वेब पेज के लिए HTML का सबसे अद्यतन संस्करण यहां दिया गया है:

// Enable Build Playlist Button
function enableBuildButton() {

  if (localStorage.twitToggleCount && localStorage.spotToggleCount) {

    var spotifyToggle = localStorage.getItem("twitToggleCount");
    var twitterToggle = localStorage.getItem("spotToggleCount");

    if (spotifyToggle && twitterToggle >= 1) {

      document.getElementById("build_playlist").disabled = false;
    }
  }
}

//Twitter Button Toggle
function clickToggleTwitter() {

  var twitToggle = document.getElementById("auth_twitter");

  if (localStorage.twitToggleCount) { // Retrieve and update toggle count 

    var currVal = localStorage.getItem("twitToggleCount");
    var updVal = +currVal + 1;

    twitToggle.setAttribute("data-twit-toggle", updVal);
    localStorage.setItem("twitToggleCount", updVal);


  } else { // Set and update toggle count 

    var currVal = twitToggle.getAttribute("data-twit-toggle");
    var updVal = +currVal + 1;

    localStorage.setItem("twitToggleCount", updVal);
    twitToggle.setAttribute("data-twit-toggle", updVal);
  }

  alert(localStorage.twitToggleCount);
}

// Spotify Button Toggle
function clickToggleSpotify() {

  var spotToggle = document.getElementById("auth_spotify");

  if (localStorage.spotToggleCount) { // Retrieve and update toggle count 

    var currVal = localStorage.getItem("spotToggleCount");
    var updVal = +currVal + 1;

    spotToggle.setAttribute("data-spot-toggle", updVal);
    localStorage.setItem("spotToggleCount", updVal);


  } else { // Set and update toggle count 

    var currVal = spotToggle.getAttribute("data-spot-toggle");
    var updVal = +currVal + 1;

    localStorage.setItem("spotToggleCount", updVal);
    spotToggle.setAttribute("data-spot-toggle", updVal);
  }

  alert(localStorage.spotToggleCount);

}

// Delete all local storage variables (and or data)
function clearLocalStorage() {
  localStorage.clear();
  alert(localStorage.spotToggleCount);
  alert(localStorage.twitToggleCount);
}

//Onclick event to redirect to build playlist web page
function navigateToBuildPlaylist() {
  window.location = "http://..../build"
}
<!DOCTYPE html>
<html>

<head>

  <title> Your Twitter Playlist </title>

</head>

<body>

  <h1>Authentication</h1>

  <p>
    In order to create "Your Twitter Playlist", the application needs access to your Spotify and Twitter accounts.
  </p>

  <button type="button" id="home"> 
       <a href="http://.../"> Home </a> 
    </button>

  <button type="button" id="auth_twitter" data-twit-toggle="0" onclick="clickToggleTwitter();enableBuildButton()">  
        <a href="http://.../auth/twitter"> Twitter </a> 
    </button>

  <button type="button" id="auth_spotify" data-spot-toggle="0" onclick="clickToggleSpotify();enableBuildButton()">
        <a href="http://.../auth/spotify"> Spotify </a> 
    </button>

  <button type="button" id="build_playlist" disabled="true" onclick="enableBuildButton();navigateToBuildPlaylist();clearLocalStorage();">
        Next
    </button>

</body>

<footer>

  <p>Designed & Built by Mikal Hayden-Gates.</p>

  <p>Copyright © 2019 Your Twitter Playlist. All Rights Reserved.</p>

</footer>

</html>

एक बार जब मैं "ट्विटर" और "स्पॉटिफाई" बटन पर क्लिक करता हूं, तो मुझे उम्मीद है कि अगला बटन सक्षम हो जाएगा, लेकिन ऐसा लगता है कि पेज के पुनः लोड होने पर यह बेतरतीब ढंग से सक्षम और अक्षम हो रहा है। कोई विचार?

0
Mikal Hayden-Gates 27 अक्टूबर 2019, 18:20

1 उत्तर

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

एंकर टैग का उपयोग जारी रखने के लिए target="_blank" rel="noopener noreferrer" का उपयोग करें:

<a href='/' target="_blank" rel="noopener noreferrer">Link</a>

आप रीडायरेक्ट कर रहे हैं और इस प्रकार स्क्रिप्ट नहीं चलती है

(वैकल्पिक रूप से बटन में बदलें और अपने जावास्क्रिप्ट में तर्क को संभालें)

संशोधित कोडपेन उदाहरण कार्य करना (एंकर टैग के साथ)

0
Willman.Codes 27 अक्टूबर 2019, 16:03