至少單擊其他兩個按鈕后，如何啟用一個按鈕？
[英]How do I enable a button once two other buttons have been clicked at least once?
問題描述
在我創建的 web 頁面上，我有四個用戶可以與之交互的主要按鈕： - 主頁：將用戶重定向到網站主頁 - Twitter：讓用戶通過 Z2491BC9C7D8731E1AEZ33124093 進行用戶身份驗證流程 - Spotify：通過用戶身份驗證流程進行下一個 Spotify： ：將用戶重定向到新的 web 頁面
我的目標是僅在用戶至少單擊一次“Twitter”和“Spotify”后才啟用“下一步”按鈕。
我創建了一些 JavaScript 函數來跟蹤用戶單擊 Twitter 和 Spotify 按鈕的次數，以嘗試在他們至少單擊這些按鈕一次后啟用“下一步”按鈕。 這個功能有點不穩定，我不知道為什么。 似乎 function 沒有正確更新我正在運行的本地存儲變量，這反過來又弄亂了“下一步”按鈕的啟用/禁用功能。
這是我的 web 頁面的 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”按鈕后會啟用“下一步”按鈕，但是當頁面重新加載時，它似乎會隨機啟用和禁用自身。 有什么想法嗎？
1 個解決方案
解決方案1
0 已采納 2019-10-27 15:50:29
要繼續使用錨標簽，請使用target="_blank" rel="noopener noreferrer" ：
<a href='/' target="_blank" rel="noopener noreferrer">Link</a>
您正在重定向，因此腳本不會運行
（或者更改為按鈕並處理 javascript 中的邏輯）
一旦單擊並重新加載頁面后，如何保持按鈕的單擊狀態？
[英]How do i retains a buttons clicked states once clicked and once the page reloads?
如何一次取消對按鈕上兩個或多個功能的跟蹤？
[英]How do I cancel the tracking of two or more functions on the buttons at once?
用戶使用 javascript 單擊圖像后如何啟用按鈕
[英]How to enable the button once the user clicked the image using javascript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.