How do I enable a button once two other buttons have been clicked at least once?
Question
On a web page I've created, I have four main buttons that the user can interact with: - Home: redirects user to website home page - Twitter: takes user through Twitter authentication process - Spotify: takes user through Spotify authentication process - Next: will redirect user to a new web page
My goal is to enable the "Next" button only after the user has clicked the "Twitter" and "Spotify" at least once.
I have created some JavaScript functions that keep track of how many times the user has clicked the Twitter and Spotify buttons in an attempt to enable the Next button after they've clicked those buttons at least once. The functionality of this is a little wonky and I'm not sure why. It seems that the function isn't properly updating the local storage variables I am running which in turn messes up the enable/disable functionally of the Next button.
Here is the most updated version of the HTML for my web page:
// 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>
I expect the Next button to be enabled once I click the "Twitter" and "Spotify" button, but it seems to randomly being enabling and disabling itself when the page reloads. Any thoughts?
1 answers
solution1
0 ACCPTED 2019-10-27 15:50:29
To continue to use anchor tags use target="_blank" rel="noopener noreferrer" :
<a href='/' target="_blank" rel="noopener noreferrer">Link</a>
You are redirecting and thus the script doesn't run
(Alternatively change to buttons and handle the logic in your javascript)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.