the javascript section of my code isn't showing where it's supposed to

hendrickvalera · March 4, 2022

Site URL: https://www.hendrickvalera.com/secrets325635731a

Hello everyone,

I'm testing a code on a secret page of my website and I'm having this issue where the javascript section of the code appears at the very bottom of the site (below the footer) instead of right below where it says "reset filter". How can I fix this?

Thanks!

https://www.hendrickvalera.com/secrets325635731a

Caroline_Smith · March 5, 2022

Hello! We would probably need to see the JavaScript code snippet to figure out what's going on.

hendrickvalera · March 8, 2022

Hey there!

Sorry it took me a while to respond. I didn't get a notification for your response.

Since this was posted I've improved the code and solved that issue. This is still a work in progress but you can check the page now to see my new problem:

At the very end of my list, squarespace is adding a few "undefined" lines that aren't reflected when i open the html page on chrome or on Atom. Do you know why that is?

Here I'm attaching what I've got so far.

<html>
  <head>
    <title>Final Assignment HV</title>

    <style>

    #theHeader {
      font-family: arial;
      color: pink;
      font-size: 38px;
      text-align: center;
    }

    .column {
      float: left;
      width: 25%;
    }

    #finalCount {
      text-align: center;
    }

    h2 {
      font-family: arial;
    }

    label {
      font-family: arial;
    }

    a.tuttiName {
      font-family: arial;
      border: 1px solid #ddd; /* Add a border to all links */
      margin-top: -1px; /* Prevent double borders */
      background-color: #f6f6f6; /* Grey background color */
      padding: 12px; /* Add some padding */
      text-decoration: none; /* Remove default text underline */
      font-size: 18px; /* Increase the font-size */
      color: black; /* Add a black text color */
      display: block; /* Make it into a block element to fill the whole list */
    }

    a.tuttiName:hover:not(.header) {
      background-color: #eee; /* Add a hover effect to all links, except for headers */
    }

    .tuttiName {
      display: list-item;
    }

    #ArtistSearch {
       padding:15px;
       border-radius: 10px;
    }

    </style>

  </head>

  <body>

    <h1 id="theHeader">Hendrick Valera Discography</h1>

    <div class="column">
    <form id="allSettings">
    <h2 class="FilterHeader">Role</h2>
    <input type="checkbox" id="check_1" value="1">
    <label for="check_1">Producer</label> <br>

    <input type="checkbox" id="check_2" value="2" onClick="showMixes()">
    <label for="check_2">Mixing/Mastering</label> <br>

    <input type="checkbox" id="check_3" value="3" onClick="showAssist()">
    <label for="check_3">Mix Assistant</label> <br>

    <input type="checkbox" id="check_4" value="4">
    <label for="check_4">Artist</label> <br>

    <input type="checkbox" id="check_5" value="5">
    <label for="check_5">Sax/Flute</label> <br>
    <br>

    </div>

    <div class="column">

    <h2 class="FilterHeader">Genre</h2>
    <input type="checkbox" id="Gcheck_1" value="1">
    <label for="Gcheck_1">Hip-Hop</label> <br>

    <input type="checkbox" id="Gcheck_2" value="2">
    <label for="Gcheck_2">R&B/Jazz</label> <br>

    <input type="checkbox" id="Gcheck_3" value="3">
    <label for="Gcheck_3">House</label> <br>

    <input type="checkbox" id="Gcheck_4" value="4">
    <label for="Gccheck_4">Reggaeton</label> <br>

    <input type="checkbox" id="Gcheck_5" value="5">
    <label for="Gcheck_5">Pop</label> <br>

    <input type="checkbox" id="Gcheck_6" value="6">
    <label for="Gcheck_6">Rock</label> <br>

    <input type="checkbox" id="Gcheck_7" value="7">
    <label for="Gcheck_7">Indie</label> <br>
    <br>

    </div>

    <div class="column">

    <h2 class="FilterHeader">Release Year</h2>
      <select id="selectYear">
        <option value="allYears"></option>
        <option value=2022>2022</option>
        <option value=2021>2021</option>
        <option value=2020>2020</option>
        <option value=2019>2019</option>
        <option value=2018>2018</option>
        <option value=2017>2017</option>
      </select>
      <br><br>

    </div>

    <div class="column">

    <h2 class="FilterHeader">Search</h2>
    <input type="text" id="ArtistSearch" value="" onkeyup="showSearch()"
    name = "search" placeholder="Artist Name, Year, Role, Title">
    <br><br>

    <br><br><br><br><br><br>

    </div>
    <button onClick= "resetAll()">Reset Filters</button>
    <br><br><hr><br>

      <select id="sortBy">
        <option value="defaultSelected">Sort By</option>
        <option value="NewSelected">Date (Newest)</option>
        <option value="OldSelected">Date (Oldest)</option>
        <option value="AZSelected">Artist (A-Z)</option>
        <option value="ZASelected">Artist (Z-A)</option>
      </select>
      <form>
      <br><br><br>

      <div id="discography"> </div>

    <script>

    let songs = [
    /*
    {
      title: "",
      artist: "",
      role: "",
      year: ,
      genre: "",
      stream: ""
    },
    */
    {
      title: "What Are Friends For EP",
      artist: "Chynna Lewis",
      role: "Mix Assistant",
      year: 2022,
      genre: "R&B",
      stream: "https://open.spotify.com/album/1PoY1vH332I6lOAyLZtZ20?si=toZMed-4Q2GazwwEFWW_7A"
    },
    {
      title: "Stars",
      artist: "Rishi Love",
      role: "Mixing & Mastering",
      year: 2022,
      genre: "House",
      stream: "https://open.spotify.com/track/5WGm3B206qsJzdwNztQVPM?si=cdd8dda610cc44be"
    },
    {
      title: "silence",
      artist: "Willie Manic",
      role: "Producer, Mixing & Mastering",
      year: 2022,
      genre: "Hip-Hop",
      stream: "https://open.spotify.com/track/456Knhe1DT585ckqoAjv52?si=086e114e9413405c"
    },
    // 2021
    {
      title: "Airegin",
      artist: "Braxton Cook",
      role: "Mixing & Mastering",
      year: 2021,
      genre: "Jazz",
      stream: "https://youtu.be/EX5WlDs0gNU"
    },
    {
      title: "Mercy",
      artist: "Domino Kirke",
      role: "Mix Assistant",
      year: 2021,
      genre: "Indie",
      stream: "https://open.spotify.com/album/7Bsni6DsrmZxhGAVMKl0Yi?si=cNlsWsqPTNWZMCvten5Fqw"
    },
    {
      title: "Groove Is What I Feel",
      artist: "Rishi Love",
      role: "Mixing & Mastering",
      year: 2021,
      genre: "House",
      stream: "https://open.spotify.com/album/7dzy5XZmSS44JeaP9OfvmA?si=KKp4McuqSxGu_2w6y3Sn3A"
    },
    {
      title: "Come Through and Chill / Somewhere in Between",
      artist: "Braxton Cook",
      role: "Mixing & Mastering",
      year: 2021,
      genre: "R&B",
      stream: "https://www.youtube.com/watch?v=pBzsG2RsWM8"
    },
    {
      title: "Make Believe",
      artist: "Julia Nunes",
      role: "Mixing",
      year: 2021,
      genre: "Indie",
      stream: "https://open.spotify.com/track/5BS9gE0CZTDhKGZWnahYqF?si=6c6913bc4a404628"
    },
    {
      title: "Jugaste Con Fuego",
      artist: "JT En La Casa",
      role: "Mixing & Mastering",
      year: 2021,
      genre: "Reggaeton",
      stream: "https://open.spotify.com/track/37vmXjvolNKwdVFYdLc9oN?si=34600d1a89b34f3c"
    },
    {
      title: "Cadenza",
      artist: "Braxton Cook",
      role: "Mixing & Mastering",
      year: 2021,
      genre: "Jazz",
      stream: "https://www.youtube.com/watch?v=IwgMO-Y6z8I"
    },
    {
      title: "Out Of Control",
      artist: "Rishi Love",
      role: "Mixing & Mastering",
      year: 2021,
      genre: "House",
      stream: "https://open.spotify.com/track/0jw7sgeb1IKqSEXrRkpSJs?si=99b8457639584712"
    },
    {
      title: "Gold (Live Home Session)",
      artist: "Braxton Cook",
      role: "Mixing & Mastering",
      year: 2021,
      genre: "R&B",
      stream: "https://www.youtube.com/watch?v=2FSC1Q5kIe4"
    },
    {
      title: "Como Nadie",
      artist: "JT En La Casa",
      role: "Mixing & Mastering",
      year: 2021,
      genre: "Reggaeton",
      stream: "https://open.spotify.com/track/0uTZ5JTFtGwsAO0iA4qM8j?si=b7a8d1dcb3864007"
    },
    {
      title: "Tu Infierno",
      artist: "JT En La Casa",
      role: "Mixing & Mastering",
      year: 2021,
      genre: "Reggaeton",
      stream: "https://www.youtube.com/watch?v=FX6-HFxt7pA"
    },
    {
      title: "Quiero",
      artist: "JT En La Casa",
      role: "Mixing & Mastering",
      year: 2021,
      genre: "Reggaeton",
      stream: "https://www.youtube.com/watch?v=qXcM1cZD2CE"
    },
    {
      title: "Me Perrea",
      artist: "JT En La Casa",
      role: "Mixing & Mastering",
      year: 2021,
      genre: "Reggaeton",
      stream: "https://www.youtube.com/watch?v=-0GIsjigAVw"
    },
    {
      title: "Land Of Funk",
      artist: "Quranic The MC",
      role: "Mixing & Mastering",
      year: 2021,
      genre: "Hip-Hop",
      stream: "https://open.spotify.com/album/5QXVDgnP797rdcZpIuLoIo?dl_branch=1&si=BZLemdozS7yzFd-yOtKKpg"
    },
    {
      title: "Narcos",
      artist: "KP",
      role: "Mixing & Mastering",
      year: 2021,
      genre: "Hip-Hop",
      stream: "https://open.spotify.com/album/3VYIUi7DTdOeY45oT1lEi9?dl_branch=1&si=Y664q6hQQnm7Q6nG8R7n_Q"
    },
    {
      title: "Believe",
      artist: "Rishi Love",
      role: "Mixing",
      year: 2021,
      genre: "House",
      stream: "https://open.spotify.com/album/2yhGYoytGcIqAjbCakkict?dl_branch=1&si=cu_vkGtMS1Wi9pdoqmWU_A"
    },
    {
      title: "Runaway",
      artist: "Rishi Love",
      role: "Mixing & Mastering",
      year: 2021,
      genre: "House",
      stream: "https://open.spotify.com/album/71wIhMtR3llNohhTnlOplb?dl_branch=1&si=tQsc9NSqTImLDatfi5hzhg"
    },
    {
      title: "Crowns",
      artist: "Nauci Gold",
      role: "Producer, Mixing & Mastering",
      year: 2021,
      genre: "R&B",
      stream: "https://www.youtube.com/watch?v=IvqUmJR3API"
    },
    {
      title: "11pm",
      artist: "PSE Natural",
      role: "Mixing",
      year: 2021,
      genre: "Hip-Hop",
      stream: "https://open.spotify.com/album/3IhTxMLJS4vuaSdYZLX9GE?dl_branch=1&si=FmZqxFpoRbicQitZGXbHdQ"
    },
    {
      title: "2am",
      artist: "PSE Natural",
      role: "Mixing",
      year: 2021,
      genre: "Hip-Hop",
      stream: "https://open.spotify.com/album/2Z2MVbF4TlBDGuQCbeipSr?dl_branch=1&si=LZpbLkpgSVGCugpbEEtm-w"
    },
    {
      title: "Vos Y Yo",
      artist: "Vickita & Buncha",
      role: "Mastering",
      year: 2021,
      genre: "R&B",
      stream: "https://open.spotify.com/album/1VbaOo0rRf0Nz3UToe14Cq?dl_branch=1&si=22-61NfqRDezUhZ5K-lcVA"
    },
    // 2020
    {
      title: "Atras No",
      artist: "nun0",
      role: "Producer, Mixing & Mastering",
      year: 2020,
      genre: "Hip-Hop",
      stream: "https://open.spotify.com/album/457rjJ1DNqDTl9S4ZrwKwR?dl_branch=1&si=2XRQr06dSYWR25bh6drcvQ"
    },
    {
      title: "Infinity",
      artist: "JacobKillz",
      role: "Producer, Mixing & Mastering",
      year: 2020,
      genre: "Hip-Hop",
      stream: "https://open.spotify.com/album/2ekI7pzNYibHgNLZaLspiy?dl_branch=1&si=sAyxdy0DRtyX9sB-2l2_Uw"
    },
    {
      title: "Abusa",
      artist: "JT En La Casa",
      role: "Mixing & Mastering",
      year: 2020,
      genre: "Reggaeton",
      stream: "https://www.youtube.com/watch?v=2J0rTeX76cU"
    },
    {
      title: "Puro Fuego",
      artist: "Kmi Kc",
      role: "Mastering",
      year: 2020,
      genre: "Hip-Hop",
      stream: "https://www.youtube.com/watch?v=GiPjx6OQTzI"
    },
    {
      title: "Don't",
      artist: "Lindinl",
      role: "Mixing & Mastering",
      year: 2020,
      genre: "Hip-Hop",
      stream: "https://open.spotify.com/album/0p4tlGbJzsTmH4vo4WBqrc?dl_branch=1&si=7t7erDNRQaOvj8w5Jq3viA"
    },
    {
      title: "Cloud9",
      artist: "ÖRNLIND",
      role: "Mixing & Mastering",
      year: 2020,
      genre: "Pop",
      stream: "https://open.spotify.com/album/4fHprr7hRecZR14NCc3rSV?dl_branch=1&si=3uSM3cWsTdSNNYGyQA51wA"
    },
    {
      title: "trynagethigh",
      artist: "ÖRNLIND",
      role: "Mixing & Mastering",
      year: 2020,
      genre: "Pop",
      stream: "https://open.spotify.com/album/3QMQLbaQMYmdgJoJWMPoUf?dl_branch=1&si=EgtpTD0WRY-3bqA_SZXg-g"
    },
    {
      title: "Estrella Fugaz",
      artist: "Nacho Nacif",
      role: "Mastering",
      year: 2020,
      genre: "Pop",
      stream: "https://www.youtube.com/watch?v=POYwa_-UJ68"
    },
    {
      title: "Roots",
      artist: "Nauci Gold",
      role: "Producer, Mixing & Mastering",
      year: 2020,
      genre: "R&B",
      stream: "https://open.spotify.com/album/0VIG6IC2esVAcwFQnZ0wrC?dl_branch=1&si=IHBpyy1fQzGnUtCK2XsHog"
    },
    {
      title: "Move My Body",
      artist: "Rishi Love",
      role: "Mixing & Mastering",
      year: 2020,
      genre: "House",
      stream: "https://open.spotify.com/album/2XalJbPct8aBTPCA7HESU7?dl_branch=1&si=weSS-DMITlWvuyVp32t2vg"
    },
    {
      title: "The Humble Dictator",
      artist: "Benegue",
      role: "Producer & Mixing",
      year: 2020,
      genre: "Indie",
      stream: "https://open.spotify.com/album/6agxqfEOVieErCTQBS4yzL?dl_branch=1&si=3aBh4CihRPqE0zNprn8fYg"
    },
    {
      title: "JOVEN ADRIEL",
      artist: "Real Arri",
      role: "Producer, Mixing & Mastering",
      year: 2020,
      genre: "Hip-Hop",
      stream: "https://youtu.be/M-MJqC73R1o"
    },
    {
      title: "Fallen Ones",
      artist: "Hendrick Valera",
      role: "Artist, Producer, Mixing & Mastering",
      year: 2020,
      genre: "Hip-Hop",
      stream: "https://open.spotify.com/album/6AabxbttwPZl5qiQySMn3u?dl_branch=1&si=Wpc6LmbVQrKokuPU4EGj7g"
    },
    {
      title: "LOCO [Ft. Real Arri & nun0]",
      artist: "Hendrick Valera",
      role: "Artist, Producer, Mixing & Mastering",
      year: 2020,
      genre: "Hip-Hop",
      stream: "https://www.youtube.com/watch?v=XxA2u2bQNXI"
    },
    {
      title: "Dial Up [Ft. //DLM]",
      artist: "Hendrick Valera",
      role: "Artist, Producer, Mixing & Mastering",
      year: 2020,
      genre: "Hip-Hop",
      stream: "https://open.spotify.com/album/0akmIBFTjc75BDKS6w1ROC?dl_branch=1&si=cXSJDOzOQf2X04ziB48WXQ"
    },
    {
      title: "Solitude",
      artist: "Hendrick Valera",
      role: "Artist, Producer, Mixing & Mastering",
      year: 2020,
      genre: "Hip-Hop",
      stream: "https://open.spotify.com/album/0IRBGjwMgvtewv2fpTcN8F?dl_branch=1&si=1mqkuOHuRN-4s8nxdxYeIQ"
    },
    // 2019
    {
      title: "Will Not Pay The Bills",
      artist: "GRUNKO",
      role: "Sax & Mixing",
      year: 2019,
      genre: "Rock",
      stream: "https://open.spotify.com/album/1nYGBAwRc9MgEfQ2PCCpiO?dl_branch=1&si=kRJVflPUSQy4hIjhkcOBZw"
    },
    {
      title: "Feelin' Myself",
      artist: "nun0",
      role: "Producer, Mixing & Mastering",
      year: 2019,
      genre: "Hip-Hop",
      stream: "https://open.spotify.com/album/7gsPjnVibEawCJegRUY8yo?dl_branch=1&si=awBJYtfJRIekDGOuadNt2A"
    },
    {
      title: "Down 2 Ride",
      artist: "Karma Rivera",
      role: "Producer, Mixing & Mastering",
      year: 2019,
      genre: "Reggaeton",
      stream: "https://www.youtube.com/watch?v=HCb-lAXnIT8"
    },
    {
      title: "Metropolis [2, 3, 6]",
      artist: "Naunet",
      role: "Sax",
      year: 2019,
      genre: "Pop",
      stream: "https://open.spotify.com/album/5ODLRNhn6K1c4AQZp9uaY6?dl_branch=1&si=a9TNKWpoQPuIEPVcdp6CBw"
    },
    {
      title: "NOMAD",
      artist: "Hendrick Valera",
      role: "Artist, Producer & Mixing",
      year: 2019,
      genre: "Hip-Hop",
      stream: "https://open.spotify.com/album/0McZ1IyobNJUCjxY1l36Et?dl_branch=1&si=aLBl3r1CSQ2IwBcHrONzYw"
    },
    // 2018
    {
      title: "Modo Amar",
      artist: "Soy Luna",
      role: "Sax",
      year: 2018,
      genre: "Pop",
      stream: "https://www.youtube.com/watch?v=Jxu9fQoGy4I"
    },
    {
      title: "Antibioticx [2, 5]",
      artist: "Clara Cava",
      role: "Sax & Producer",
      year: 2018,
      genre: "Pop",
      stream: "https://open.spotify.com/album/5s8iUnO355PDLfFjSVEDGa?dl_branch=1&si=W4KYKN4URvCSDLF8AT1dlA"
    },
    {
      title: "Sticky Nostalgia [3, 7, 9]",
      artist: "Grace & Badlove",
      role: "Sax & Flute",
      year: 2018,
      genre: "R&B",
      stream: "https://open.spotify.com/album/0xCN1I0yfoxerIetVbp1Wk?dl_branch=1&si=PrRIE9G0RDW-mZVz4aze5g"
    },
    {
      title: "Frankly Statin'",
      artist: "Hendrick Valera",
      role: "Artist, Producer & Mixing",
      year: 2018,
      genre: "Hip-Hop",
      stream: "https://open.spotify.com/album/1q64HNMLuVXbkbhrZrjFX1?dl_branch=1&si=ehG5eR9iQUeR8cjeRBFEuA"
    },
    {
      title: "House [Ain't No] Home",
      artist: "Hendrick Valera",
      role: "Artist, Producer & Mixing",
      year: 2018,
      genre: "House",
      stream: "https://open.spotify.com/album/11msJK14fXW78Eg8v7mDin?dl_branch=1&si=ph3Rn2BpT9mX5KXHDAI-NA"
    },
    // 2017
    {
      title: "H96",
      artist: "Hendrick Valera",
      role: "Artist, Producer & Mixing",
      year: 2017,
      genre: "Hip-Hop",
      stream: "https://open.spotify.com/album/7Id4lJuo30mgJfqlhIg7Br?dl_branch=1&si=eodjh9usRMWsPdSgLpF4Mg"
    },
    ]

    // FINISHED === Create full list of songs
    function listSongs(arr) {

      for (k in arr) {

        let insertEverything = document.getElementById("discography")

        let div_song = document.createElement('div')
        document.body.appendChild(div_song)

        let fullDisplay = document.createElement('a')
        fullDisplay.className = "tuttiName"
        fullDisplay.href = arr[k].stream
        fullDisplay.target = "_blank"
        fullDisplay.innerHTML = arr[k].artist + " - " + arr[k].title + " (" + arr[k].role + ") " + " [" + arr[k].year + "]"
        document.body.appendChild(fullDisplay)

        insertEverything.appendChild(div_song)
        insertEverything.appendChild(fullDisplay)
      }
    }

    // FINISHED === Delete list of songs
    function deleteAll(arr) {
      let currentList = document.querySelectorAll("a.tuttiName")
      for ( j of currentList ) {
        j.style.display = "none"
      }
    }

    // default view of list
    listSongs(songs)

    // FINISHED === sort A-Z or Newest/Oldest
    let alphaArtist = document.getElementById("sortBy")
    alphaArtist.addEventListener("change", (sortingBy) => {

      deleteAll(songs)

      // Sort by newest [default]
      if (alphaArtist.value == "defaultSelected") {

        for (k in songs) {

          songs.sort(function ( a, b ) {
            if (a.year > b.year ) {
              return -1
            }
            if (a.year < b.year ) {
              return 1
            }
            return 0
          })
        }
        listSongs(songs)
        }
      // Sort alphabetically by artist Name A-Z
      if (alphaArtist.value == "AZSelected") {

        let azList = document.querySelectorAll("a.tuttiName")

        for (a of azList) {
          songs.sort(function ( a, b ) {

            if (a.artist.toLowerCase() > b.artist.toLowerCase() ) {
              return 1
            }
            if (a.artist.toLowerCase() < b.artist.toLowerCase() ) {
              return -1
            }
            return 0
          })
        }
        listSongs(songs)
        }
      // Sort alphabetically by artist Name Z-A
      if (alphaArtist.value == "ZASelected") {

        for (k in songs) {

          songs.sort(function ( a, b ) {
            if (a.artist.toLowerCase() > b.artist.toLowerCase() ) {
              return -1
            }
            if (a.artist.toLowerCase() < b.artist.toLowerCase() ) {
              return 1
            }
            return 0
          })
        }
        listSongs(songs)
        }
      // Sort by newest
      if (alphaArtist.value == "NewSelected") {

        for (k in songs) {

          songs.sort(function ( a, b ) {
            if (a.year > b.year ) {
              return -1
            }
            if (a.year < b.year ) {
              return 1
            }
            return 0
          })
        }
        listSongs(songs)
        }
      // Sort by oldest
      if (alphaArtist.value == "OldSelected") {

        for (k in songs) {

          songs.sort(function ( a, b ) {
            if (a.year < b.year ) {
              return -1
            }
            if (a.year > b.year ) {
              return 1
            }
            return 0
          })
        }
        listSongs(songs)
        }

    })

    // producer role results

    // mix engineer/mastering role results
    function showMixes() {
      let clickMix = document.getElementById("check_2")
      if (clickMix.checked == true) {
        deleteAll(songs)

        let mixesOnly = songs.filter(function (el) {
          return el.role == "Mixing & Mastering" ||
          el.role == "Producer, Mixing & Mastering" ||
          el.role == "Mastering" ||
          el.role == "Artist, Producer & Mixing" ||
          el.role == "Sax & Mixing" ||
          el.role == "Artist, Producer, Mixing & Mastering"
        })
        listSongs(mixesOnly)

      }
      if (clickMix.checked == false) {
      }
    }

    // mix assistant role results
    function showAssist() {
      let clickAssist = document.getElementById("check_3")
      if (clickAssist.checked == true) {
        deleteAll(songs)

        let assistOnly = songs.filter(function (el) {
          return el.role == "Mix Assistant"
        })
        listSongs(assistOnly)
      }
      if (clickAssist.checked == false) {
      }
    }

    // artist role results
    // sax/flute role results

    // show Hip-Hop results
    // show R&B/Jazz results
    // show House results
    // show Reggaeton results
    // show Pop results
    // show Rock results
    // show Indie results

    // FINISHED === show results by release Year
    let yearRelease = document.getElementById("selectYear")
    yearRelease.addEventListener("change", (yearSortingBy) => {

      deleteAll(songs)

      // show all results
      if (yearRelease.value == "allYears") {
        listSongs(songs)
        }
      // show 2022 results
      if (yearRelease.value == "2022") {
        let only2022 = songs.filter(function (el) {
          return el.year == "2022"
        })
        listSongs(only2022)
        }
      // show 2021 results
      if (yearRelease.value == "2021") {
        let only2021 = songs.filter(function (el) {
          return el.year == "2021"
        })
        listSongs(only2021)
        }
      // show 2020 results
      if (yearRelease.value == "2020") {
        let only2020 = songs.filter(function (el) {
          return el.year == "2020"
        })
        listSongs(only2020)
        }
      // show 2019 results
      if (yearRelease.value == "2019") {
        let only2019 = songs.filter(function (el) {
          return el.year == "2019"
        })
        listSongs(only2019)
        }
      // show 2018 results
      if (yearRelease.value == "2018") {
        let only2018 = songs.filter(function (el) {
          return el.year == "2018"
        })
        listSongs(only2018)
        }
      // show 2017 results
      if (yearRelease.value == "2017") {
        let only2017 = songs.filter(function (el) {
          return el.year == "2017"
        })
        listSongs(only2017)
        }

    })

    // FINISHED === hide text in search bar and show results
    let emptyArtist = document.getElementById("ArtistSearch")
    emptyArtist.addEventListener("click", (hideText) => {
      emptyArtist.value = ""
    })
    function showSearch() {
      let input = emptyArtist.value
      input = input.toLowerCase();
      let x = document.getElementsByClassName("tuttiName");

      for ( b = 0 ; b < x.length ; b++ ) {
        if ( ! x[b].innerHTML.toLowerCase().includes(input) ) {
            x[b].style.display="none";
        } else {
            x[b].style.display="list-item";
        }
      }
    }

    // number of results found
    function songCounter () {
      let divList = document.createElement('hr')
      document.body.appendChild(divList)

      let numberSongs = document.querySelectorAll("a.tuttiName")

      let count = numberSongs.length;

      let totalSum = document.createElement('p')
      totalSum.id = "finalCount"
      totalSum.innerHTML = count + " releases found"
      document.body.appendChild(totalSum)
    }

    // FINISHED === reset all filters
    function resetAll() {
      document.getElementById("allSettings").reset()
    }

    /*
    */
    </script>

  </body>
</html>

Let me know what you think,

Thanks!

hendrickvalera · March 8, 2022

1 minute ago, hendrickvalera said:

 function listSongs(arr) {

      for (k in arr) {

        let insertEverything = document.getElementById("discography")

        let div_song = document.createElement('div')
        document.body.appendChild(div_song)

        let fullDisplay = document.createElement('a')
        fullDisplay.className = "tuttiName"
        fullDisplay.href = arr[k].stream
        fullDisplay.target = "_blank"
        fullDisplay.innerHTML = arr[k].artist + " - " + arr[k].title + " (" + arr[k].role + ") " + " [" + arr[k].year + "]"
        document.body.appendChild(fullDisplay)

        insertEverything.appendChild(div_song)
        insertEverything.appendChild(fullDisplay)
      }
    }

This is the section of the code that displays the list. sorry for posting the full thing before.

Caroline_Smith · March 8, 2022

25 minutes ago, hendrickvalera said:

This is the section of the code that displays the list. sorry for posting the full thing before.

I debugged the code on your site and it looks like there are some functions or event handlers that are getting added as objects for some reason.

However, it worked fine when I changed the "for-in" loop the native "for-loop" (or as I call it, old reliable, lol):

      for (let k = 0; k < arr.length; k++) {

        let insertEverything = document.getElementById("discography")

        let div_song = document.createElement('div')
        document.body.appendChild(div_song)

        let fullDisplay = document.createElement('a')
        fullDisplay.className = "tuttiName"
        fullDisplay.href = arr[k].stream
        fullDisplay.target = "_blank"
        fullDisplay.innerHTML = arr[k].artist + " - " + arr[k].title + " (" + arr[k].role + ") " + " [" + arr[k].year + "]"
        document.body.appendChild(fullDisplay)

        insertEverything.appendChild(div_song)
        insertEverything.appendChild(fullDisplay)
      }

hendrickvalera · March 8, 2022

2 hours ago, Caroline_Smith said:

However, it worked fine when I changed the "for-in" loop the native "for-loop" (or as I call it, old reliable, lol):

omg this worked!! thank you SO much!!! if you can help me a little bit more, this is the last question I have for now:

do you have any general advice for preparing this program so it doesn't interfere with anything external to the code on my website? For example, if you go to my homepage you can see that I have a newsletter sign up in the footer and when I load the "secrets" page this sign up form disappears. Why could that be?

Thank you again!

Caroline_Smith · March 8, 2022

5 minutes ago, hendrickvalera said:

omg this worked!! thank you SO much!!! if you can help me a little bit more, this is the last question I have for now:

do you have any general advice for preparing this program so it doesn't interfere with anything external to the code on my website? For example, if you go to my homepage you can see that I have a newsletter sign up in the footer and when I load the "secrets" page this sign up form disappears. Why could that be?

Thank you again!

I might be looking at the wrong page, but I didn't see a newsletter signup form on any of your footers on any pages. As general advice, I'd say to make sure you create CSS selectors that are vastly different than the native Squarespace CSS selectors, that way you don't run the risk of accidentally selecting something like a newsletter block or some other element.

I would also advice to be very careful when modifying the DOM with things like append, prepend, innerHTML. Sometimes you can unintentionally replace the html of a Squarespace element when you actually meant to add it after or before the element.

hendrickvalera · March 8, 2022

20 minutes ago, Caroline_Smith said:

I might be looking at the wrong page, but I didn't see a newsletter signup form on any of your footers on any pages. As general advice, I'd say to make sure you create CSS selectors that are vastly different than the native Squarespace CSS selectors, that way you don't run the risk of accidentally selecting something like a newsletter block or some other element.

I would also advice to be very careful when modifying the DOM with things like append, prepend, innerHTML. Sometimes you can unintentionally replace the html of a Squarespace element when you actually meant to add it after or before the element.

This makes total sense! Thank you so much!!

Regarding the newsletter block, it also wouldn't show when I went from the "secret" page to the homepage, but if I reload or go straight to the homepage (https://www.hendrickvalera.com/) the newsletter block shows up in the footer. Does the same happen to you?

I will carefully rename my css selectors. Thank you again! Have a great day 🙂

the javascript section of my code isn't showing where it's supposed to

Recommended Posts

hendrickvalera

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

Caroline_Smith

Caroline_Smith

Caroline_Smith

Link to comment

hendrickvalera

Link to comment

hendrickvalera

Link to comment

Caroline_Smith

Link to comment

hendrickvalera

Link to comment

Caroline_Smith

Link to comment

hendrickvalera

Link to comment

Create an account or sign in to comment

News

Caroline_Smith

Caroline_Smith

Events

Circle Day

Resources

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources