javascript - 至少单击其他两个按钮后，如何启用一个按钮？

问题描述

在我创建的网页上，我有四个用户可以与之交互的主要按钮： - 主页：将用户重定向到网站主页 - Twitter：引导用户完成 Twitter 身份验证过程 - Spotify：引导用户完成 Spotify 身份验证过程 - 下一步: 将用户重定向到一个新的网页

我的目标是仅在用户至少单击一次“Twitter”和“Spotify”后才启用“下一步”按钮。

我创建了一些 JavaScript 函数来跟踪用户单击 Twitter 和 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>

我希望单击“Twitter”和“Spotify”按钮后会启用“下一步”按钮，但是当页面重新加载时，它似乎会随机启用和禁用自身。有什么想法吗？

标签： javascripthtml

javascript - 至少单击其他两个按钮后，如何启用一个按钮？

问题描述

解决方案

推荐阅读