在我创建的网页上，我有四个用户可以交互的主按钮：-主页：将用户重定向到网站主页-Twitter：带用户通过Twitter身份验证过程-Spotify：带用户通过Spotify认证流程-下一步：将用户重定向到新的网页
我的目标是只有在用户点击"推特"one_answers"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>我希望一旦我点击"推特"one_answers"Spotify"按钮，"下一步"按钮就会被启用，但当页面重新加载时，它似乎是随机启用和禁用的。有什么想法吗？
要继续使用锚点标记，请使用target="_blank" rel="noopener noreferrer":
<a href='/' target="_blank" rel="noopener noreferrer">Link</a>
您正在重定向，因此脚本不会运行
(或者更改为按钮并处理javascript中的逻辑(
工作修改的CodePen示例(带锚定标签(