Javascript Question posted in
A very good W3school tutorial can be found here.

Show/hide element based on URL matching in Javascript

total newbie here, first try in getting a script to work for an a/b-test.
I have one element, ‘prodBanEle’, that I want to be seen only if up to three other URLs (topBanUrl1, topBanUrl2, topBanUrl3) in another element also present on the page is a part of the current URL.

So for example: if you visit "mywebsite.com/category-grey-pants/product-light-grey-shorts/", ‘prodBanEle’ should only be visible if "mywebsite.com/category-grey-pants/" is one of the three URLs.

If the current URL instead is "mywebsite.com/category-shorts/product-light-grey-shorts/", ‘prodBanEle’ should not be visible.

This is what I’ve tried to get to work, the thing I’m most uncertain of is indexOf actually works with variables, or only strings. But I’m sure there are a bunch of other mistakes in there…

$(function(){
    var prodBanEle = document.getElementById("addToCardButtonDiv").getElementsByClassName("banner ")[0];
    var topBanUrl1 = document.getElementById("top_banner_url_1");
    var topBanUrl2 = document.getElementById("top_banner_url_2");
    var topBanUrl3 = document.getElementById("top_banner_url_3");
        if (window.location.href.indexOf(topBanUrl1)){
                prodBanEle.style.display = "block";
        } 
        else if (window.location.href.indexOf(topBanUrl2)){
                prodBanEle.style.display = "block";
        }
        else if (window.location.href.indexOf(topBanUrl3)){
                prodBanEle.style.display = "block";
        }
        else { prodBanEle.style.display = "none";
        }
    }
  );

Are there any obvious mistakes the you recognize immediately, or should it work?

Thank you for your help!

Tags:

2

Answers


  1. 0
    1. Don’t mix jQuery and DOM like that – I changed to plain JS
    2. Cache the value to not keep requesting it
    3. I assume document.getElementById("top_banner_url_1") is a link with an href? Or .textContent?
    4. I use .some, which will return true if any of the URLs are included the href

    I can answer better if I see some HTML

    document.addEventListener('DOMContentLoaded', () => {
  let prodBanEle = document.getElementById("addToCardButtonDiv").querySelector(".banner");
  let topBanIDs = ["top_banner_url_1", "top_banner_url_2", "top_banner_url_3"];
  let href = window.location.href;
  prodBanEle.hidden = !topBanIDs.some(id => href.includes(document.getElementById(id).href)); // assuming a link, if not use .textContent
});
    Login or Signup to reply.
  2. 0

    One possible mistake is

    topBanUrl1, topBanUrl2, and topBanUrl3 should be strings not elements since you use indexOf.

    I don’t know what the html is, but instead of

    var topBanUrl1 = document.getElementById("top_banner_url_1");
var topBanUrl2 = document.getElementById("top_banner_url_2");
var topBanUrl3 = document.getElementById("top_banner_url_3");

    it would be this assuming that top_banner_url_1, top_banner_url_2, top_banner_url_3 are links

    var topBanUrl1 = document.getElementById("top_banner_url_1").href;
var topBanUrl2 = document.getElementById("top_banner_url_2").href;
var topBanUrl3 = document.getElementById("top_banner_url_3").href;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search