Pada halaman web yang saya buat, saya memiliki empat tombol utama yang dapat berinteraksi dengan pengguna: - Beranda: mengarahkan pengguna ke halaman beranda situs web - Twitter: membawa pengguna melalui proses otentikasi Twitter - Spotify: membawa pengguna melalui proses otentikasi Spotify - Berikutnya : akan mengarahkan pengguna ke halaman web baru

Tujuan saya adalah mengaktifkan tombol "Berikutnya" hanya setelah pengguna mengklik "Twitter" dan "Spotify" setidaknya sekali.

Saya telah membuat beberapa fungsi JavaScript yang melacak berapa kali pengguna telah mengklik tombol Twitter dan Spotify dalam upaya untuk mengaktifkan tombol Berikutnya setelah mereka mengklik tombol tersebut setidaknya sekali. Fungsionalitas ini sedikit miring dan saya tidak yakin mengapa. Tampaknya fungsinya tidak memperbarui dengan benar variabel penyimpanan lokal yang saya jalankan yang pada gilirannya mengacaukan fungsi aktifkan/nonaktifkan tombol Berikutnya.

Berikut adalah versi terbaru dari HTML untuk halaman web saya:

// 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>

Saya berharap tombol Berikutnya diaktifkan setelah saya mengklik tombol "Twitter" dan "Spotify", tetapi tampaknya secara acak mengaktifkan dan menonaktifkan dirinya sendiri ketika halaman dimuat ulang. Ada pikiran?

0
Mikal Hayden-Gates 27 Oktober 2019, 18:20

1 menjawab

Jawaban Terbaik

Untuk terus menggunakan tag jangkar, gunakan target="_blank" rel="noopener noreferrer":

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

Anda mengarahkan ulang dan dengan demikian skrip tidak berjalan

(Atau ubah ke tombol dan tangani logika di javascript Anda)

Contoh CodePen yang dimodifikasi bekerja (dengan tag jangkar)

0
Willman.Codes 27 Oktober 2019, 16:03