A set button starts clicked/active when page is opened/refreshed-CodePudding

I have a little system where if I click on a button it changes the color of the clicked on button and if I click on the other button it changes its color as well as setting the previously clicked button back to its original color.

All I want is to have one of the buttons set as active (clicked) when the page is opened/refreshed. Preferably the Login set as the default clicked.

Thank you is advance :)

HTML:

<div >
    <button >LOGIN</button>
    <button >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");
    
  } 
});

CodePudding user response：

If you want to have one button to be active by default on pageload then simply add active class to that button. Like:

// 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");
  }
});

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

<div >
    <button >LOGIN</button>
    <button >REGISTER</button>
</div>