Tengo un pequeño sistema en el que si hago clic en un botón, cambia el color del botón en el que se hizo clic y si hago clic en el otro botón, cambia su color y vuelve a configurar el botón en el que se hizo clic anteriormente a su color original.

Todo lo que quiero es tener uno de los botones configurado como activo (hacer clic) cuando la página se abre/actualiza. Preferiblemente, el inicio de sesión establecido como predeterminado hizo clic.

Gracias de antemano :)

HTML:

 <div class="login-or-register-container"> <button class="button-categories">LOGIN</button> <button class="button-categories">REGISTER</button> </div>

CSS:

 .login-or-register-container { display: flex; } button.button-categories:hover { border-bottom-width: 1px; border-bottom-color: #1100ff; } button.button-categories { font-size: 12px; display: block; width: 100px; height: 40px; color: #fff; background-color: #555; border: solid; border-radius: 0px; border-width: 1px; border-color: #999; text-align: center; font-weight: 1000; } button.button-categories.active { border-bottom-width: 2px; border-bottom-color: #1100ff; padding-top: 1px; color: #1100ff; }

JavaScript:

 // Get all the buttons into a node list let buttons = document.querySelectorAll(".button-categories"); // Set an event handler on the document so that when // any element is clicked, the event will bubble up to it document.addEventListener("click", function(evt){ // Check to see if it was a button that was clicked if(evt.target.classList.contains("button-categories")){ // Loop over all the buttons & remove the active class buttons.forEach(function(button){ button.classList.remove("active"); }); // Make the clicked button have the active class evt.target.classList.add("active"); } });