Stuck on this problem for 2 days, Whenever i click a button in the top bar, it doesnt get animated. its width should increase and its left-border-color should turn green. however that isnt whats happening. I am using svelte and i am really new to it so the code quality is powerpoint quality.The Code:
<script lang="ts"> export let name; function onTopBarBtnClick(tab) { let tabButton = document.getElementsByClassName('topbarbtn '+ tab)[0] tabButton.classList.add('selected') }</script><main><nav class='topbar'><label class="websitenameinfo">{name}</label><button on:click={() => onTopBarBtnClick('1')} class="topbarbtn 1">Servers</button><button on:click={() => onTopBarBtnClick('2')} class="topbarbtn 2">Events</button><button on:click={() => onTopBarBtnClick('3')} class="topbarbtn 3">Store</button><button on:click={() => onTopBarBtnClick('4')} class="topbarbtn 4">Info</button></nav></main><style> .topbar { position: absolute; width: 100vw; height: 8vh; top: 0vh; left: 0vw; background-color: #1c1c1c; box-shadow: 1vh 1vh 2.8vh rgba(28, 28, 28, 0.8); } .websitenameinfo { position: absolute; top: 1vh; left: 1vw; text-transform: uppercase; font-family: Tahoma; font-size: 4.7vh; background: -webkit-linear-gradient(#2071cd, #0ac7ba); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0px 0px 3vh #579dffb3; font-weight: 800; } .topbarbtn { width: 10.1vw; height: 8vh; float: right; border-radius: 0px; background: -webkit-linear-gradient(#20cd31, #0ac7ba); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0px 0px 3vh #15ffbd5e, 0px 0px 1.5vh #1573ff66; font-weight: 600; font-family: Tahoma; font-size: 3.8vh; border-image: linear-gradient(); border-width: 0px; border-left-width: 0.1vw; border-color: rgb(45, 45, 45); color: rgb(52, 52, 52); vertical-align: top; transition: all 0.3s cubic-bezier(0.075, 0.82, 0.3, 1); } .selected { border-color: #0af05e; width: 15vw; border-left-width: 0.27vw; text-shadow: 0px 0px 3vh #6fffd6da, 0px 0px 1.6vh #84ff106d; }</style>I tried basically all i could search on the internet, nothing worked. i expected the buttons width to expand and the left border color to turn green. however instead what happens is, clicking on it does ABSOLUTELY nothing for some reason. ig its a issue with how i am adding 'selected' to the classlist but i am not sure.