Search code examples
javascriptonclickurl-parametersurlparse

Click a button, reload window with parameters, and remove button


So I've got a web page with a div that covers the entire page asking the customer to select their preferred currency.

When they select either USA or UK the page reloads with the currency parameter in the URL (/?currency=GBP) and this changes the prices displayed on the page.

However no matter what I try I can't get that div to display none when the page reloads.

So here's the code for the pop-over:

<div id="floatingBox">
    <div>
        The two buttons go here.
        <a href="/?currency=GBP">UK</a>
        <a href="/?currency=USD">USA</a>
    </div>
</div>

Here's the style for the id floatingBox:

#floatingBox {
    z-index: 39879;
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

And here's the JavaScript I'm using:

if (window.location.search.search('GBP')) {
    document.getElementById('floatingBox').display = 'none';
}

if (window.location.search.search('USD')){
    document.getElementById('floatingBox').display = 'none';
}

So basically everything is working fine, other than removing #floatingDiv when the user has selected an option.

How do I make this div not appear when the page is reloaded and when there is a URL parameter? Using JavaScript not jQuery.

I'm thinking that it might be better to use the onclick and run a function that uses localStorage and calling the style variable for that div or something like that...

Any help appreciated :)

EDIT

I'm going to test:

var hide = localStorage.getItem('currChoice') || 0;
if (hide == 1){
    document.getElementById('floatingBox').style.display = "none";
}

function gbpClick(){
    var currChoice = 1;
    localStorage.setItem('currChoice', currChoice);
    location.href='/?currency=GBP';
}

function usdClick(){
    var currChoice = 1;
    localStorage.setItem('currChoice', currChoice);
    location.href='/?currency=USD';
}

Solution

  • The edit I posted on the main question worked perfectly for what I needed.

    Here is the final code: HTML:

    <div id="floatingBox">
    <div>
    The two buttons go here.
    <a href="/?currency=GBP">UK</a>
    <a href="/?currency=USD">USA</a>
    </div>
    </div>
    

    Style:

    #floatingBox {
        z-index: 39879;
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    

    JavaScript:

    var hide = localStorage.getItem('currChoice') || 0;
    if (hide == 1){
    document.getElementById('floatingBox').style.display = "none";
    localStorage.clear();
    }
    
    function gbpClick(){
    var currChoice = 1;
    localStorage.setItem('currChoice', currChoice);
    location.href='/?currency=GBP';
    }
    
    function usdClick(){
    var currChoice = 1;
    localStorage.setItem('currChoice', currChoice);
    location.href='/?currency=USD';
    }
    

    EDIT Added localStorage.clear(); to if to ensure that if a user changes their URL from .com/?currency=GBP or .com/?currency=USD back to .com/ they will be presented with the pop up again.