Создание if if для отображения альтернативного div на основе URL

Question

Я пытаюсь сделать оператор if else для отображения одного или другого div на основе URL, но он не работает вообще, только один div постоянно отображает:

Div 1 - единственный, который продолжает показывать, Я пробовал многочисленные обходные пути:

    <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;}

Я сейчас поставил скрипт в конец, но все еще не работает.

Также, возьмите мои сайты usr как examplemy / pink

Answer 1

Сценарий выполняется до загрузки div.Он не сможет их найти;вы, вероятно, увидите ошибки в консоли разработки, если откроете ее при загрузке этой страницы.Вам следует либо переместить скрипт под div, либо поместить код в обработчик событий для события load окна (window.addEventListener('load', function() { ... })), чтобы он не работал до тех пор, пока не загрузятся div.(Вы также можете использовать событие DOMContentLoaded вместо обычного события загрузки для этого случая, хотя это менее известно.)