Click a link, have a specific element clicked on next page

user_18125132 0
Viewed 112

I want it so when you click a link to a page containing multiple filters, the next page loads, with one of the specific filters clicked. I tried the method of having the filter load when a specific url is showing, but it doesn't seem to execute the code. Thanks in advance!

window.location.href = "https://mare-island-brewing-co-vallejo.webflow.io/news?filter0=Category:%20Events";
document.addEventListener('DOMContentLoaded', ()=>{
     document.querySelector('.filter-text-events').active = true;
     document.querySelector('.filter-text-events').click();
})
element click load url javascript
1 Answers

You could use urlSearchParams() on the window.location.search to return an object of the parameters in the url. Then run the constructor object through a loop and iterate over the event elements nodeLists.classList to see if there is a match. If the conditional is true run the .click() method on the element.

// the elements affected by your event
const filters = document.querySelectorAll('.filters');

document.addEventListener('DOMContentLoaded', () => {
  // this string not needed if youa re getting the url using window.loaction.search
  const url = "https://mare-island-brewing-co-vallejo.webflow.io/news?filter0=Category:%20Events";
  // can replace url.split('?')[1] with => window.location.search
  const urlSearchParams = new URLSearchParams(url.split('?')[1]);
  // set an object and return the entries found in the parameters of the url
  const params = Object.fromEntries(urlSearchParams.entries());
  // loop over the URL parameters
  for (let param in params) {
    // loop over the nodeList
    filters.forEach(el => {
      // check if the elements classList contains the parameter
      if (el.classList.contains(param)) {
        // for a click on the button
        el.click();
      }
    })
  }
})

Event Listener

const selectEvent = (e) => {
  document.getElementById(e.target.id).classList.toggle('active')
}

filters.forEach(el => el.addEventListener('click', selectEvent));

So if for example you have an eventListener on the second page called selectEvent that toggles an active class, run a for loop over the URL search params object and then iterate over the event elements nodeList and check for a match on the parameter and the classList of the event element.

See the snippit for a working example using your URL string.

Let me know if this is not what you were look for and I can adjust or delete this answer.

const filters = document.querySelectorAll('.filter-text-events');

document.addEventListener('DOMContentLoaded', () => {
  // this string not needed if youa re getting the url using window.loaction.search
  const url = "https://mare-island-brewing-co-vallejo.webflow.io/news?filter0=Category:%20Events";
  // can replace url.split('?')[1] with => window.location.search
  const urlSearchParams = new URLSearchParams(url.split('?')[1]);
  // set an object and return the entries found in the parameters of the url
  const params = Object.fromEntries(urlSearchParams.entries());
  // loop over the URL parameters
  for (let param in params) {
    // loop over the nodeList
    filters.forEach(el => {
      // check if the elements classList contains the parameter
      if (el.classList.contains(param)) {
        // for a click on the button
        console.log(el)
        el.click();
      }
    })
  }
})


// basic eventListner and callback function that may be set to show events when buttons are clicked
const selectEvent = (e) => {
  document.getElementById(e.target.id).classList.toggle('active')
}

filters.forEach(el => el.addEventListener('click', selectEvent));
.flex {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.filterBtn {
  width: fit-content;
}

.active {
  padding: 1rem;
  background-color: lightgreen;
  color: darkgreen;
  border: 1px solid darkgreen;
  border-radius: 1rem;
}
<div class="flex">
  <div id="filter0" class="filter0 filter-text-events">This is the event that was selected on the first page</div>
  <div id="filter1" class="filter1 filter-text-events">This is the second event</div>
</div>

user_15335920
Related