Creating a if else to display alternative div based on url

I'm trying to do an if else statement for displaying one div or the other based on url but it's not working at all only one div constantly displays:

Div 1 is the only one that keeps showing, I've tried numerous work-arounds:

    <script>
    if (window.location.href.indexOf("pink") > -1)
    {
    document.getElementById("div2").style.display="none";
    }
    else {
    document.getElementById("div1").style.display="none";
    }
    </script>

    <div id= "div2">
    <a id="link2" href="https://example2" target="_top"></a>
    </div>

    <div id= "div1">
    <a id="link1" href="https://example1" target="_top"></a>
    </div>

    <style>
    #link2
{
background: url(http://examplemy.com/wp-content/backtwo.PNG); 
background-repeat: no-repeat;
background-size:cover;
}
    #link1
    { 
background: url(http://examplemy.com/wp-content/backone.PNG); 
background-repeat: no-repeat;
background-size:cover;
            }
    html, body {width: 100%; height: 100%; margin: 0;}