Problem z toggle

0

Mam taki dziwny problem. Chcę dodać klasę za pomocą toggle. Klasa jest dodawana tylko na chwilę i zaraz znika. Dokładnie taki sam problem jest kiedy uzywam add. Kod poniżej. Trochę bałaganu, ale to testy testy :)

 .js-test {
           width: 150px;
           height: 150px;
           background-color: blueviolet;
           display: none;
       }
       .js-test-visible {
           display: block;
       }
    </style>
</head>
<body>
<div class="left">
    <div class="js-test"></div>
</div>
<div class="menu">
    <div class="button">
        <div class="menu-frame">
            <div class="info">
                <a href=""#>
                    <i class="far fa-question-circle"></i>
                </a>
            </div>
            <div class="divider"></div>
            <div class="main-part"><p>Power</p></div>
        </div>
    </div>
</div>

<script>
    var divInfo = document.querySelector('.info');
    var jsTest = document.querySelector('.js-test');


    function purple() {
        jsTest.classList.toggle('js-test-visible');
        
    }
    divInfo.addEventListener('click', purple);
</script>    
</body>
</html>
2 
<a href=""#>
       <i class="far fa-question-circle"></i>
 </a>

Znika Ci ten fioletowy prostokąt, bo przez tag <a> przeładowuje Ci się strona. Wyrzuć go, zostawiając tylko <i> ze środka i powinno działać.

0
Chramar napisał(a):
<a href=""#>
       <i class="far fa-question-circle"></i>
 </a>

Znika Ci ten fioletowy prostokąt, bo przez tag <a> przeładowuje Ci się strona. Wyrzuć go, zostawiając tylko <i> ze środka i powinno działać.

Dzieki za podp.

1 użytkowników online, w tym zalogowanych: 0, gości: 1