Focus on buttons working in console, but not elsewhere?

Issue

I have 4 buttons, that when clicked I am attempting to set focus on them, so the user can see which button is currently active.

For some reason it appears to be working in console as expected, when a button is clicked, it adds focus, changes background colour as per CSS, then when another button is clicked the first button loses focus, and the new one gains it.

When I don't have console open, it does not work.

const oneYear = document.getElementById('1Year');
const fiveYear = document.getElementById('5Year');
const tenYear = document.getElementById('10Year');
const twentyYear = document.getElementById('20Year');

function changeDate(date) {

  if (date === 1) {
    oneYear.className += " active";
    setTimeout(oneYear.focus(), 1);
  }
  if (date === 5) {
    fiveYear.focus();
    fiveYear.className += " active";
  }
  if (date === 10) {
    tenYear.focus();
  }
  if (date === 20) {
    twentYear.focus();
  }
}

.theme-dark-btn {
  transition: all ease 1s;
  background-image: linear-gradient(to left, #1ACC8D, #1ACC8D, #235FCD, #1C4CA3);
  background-size: 300%;
  background-position: 0 0;
  border: 1px solid #1C4CA3;
  font-weight: 600;
  letter-spacing: 1px;
}

.theme-dark-btn:hover {
  background-position: 100% 0;
  border: 1px solid #1ACC8D;
}

.theme-dark-btn:focus {
  background-color: #1ACC8D;
}

.theme-dark-btn:active {
  background-color: #1ACC8D;
}

.btn {
  height: 38px;
  line-height: 35px;
  text-align: center;
  padding: 0 18px;
  text-transform: uppercase;
  transition: background-image .3s linear;
  transition: box-shadow .3s linear;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  font-size: 12px !important;
}

.btn:focus {
  background-color: #1ACC8D;
}

<div class="col">
  <button class="btn theme-dark-btn" type="button" style="color: white" id="1Year" onclick="changeDate(1)" autofocus>1 Year</button>
  <button class="btn theme-dark-btn" style="color: white" id="5Year" onclick="changeDate(5)">5 Years</button>
  <button class="btn theme-dark-btn" style="color: white" id="10Year" onclick="changeDate(10)">10 Years</button>
  <button class="btn theme-dark-btn" style="color: white" id="20Year" onclick="changeDate(20)">20 Years</button>
</div>

Solution

First of all, when you click the button you already make it focused, you don't need to make it focus() dynamically.

So, why the background color doesn't change?

Because background-image already overrides the background-color

You need just set the background instead of background-color

    .btn:focus {
        background: #1ACC8D;
    }

Full example without JS

.theme-dark-btn {
  transition: all ease 1s;
  background-image: linear-gradient(to left, #1ACC8D, #1ACC8D, #235FCD, #1C4CA3);
  background-size: 300%;
  background-position: 0 0;
  border: 1px solid #1C4CA3;
  font-weight: 600;
  letter-spacing: 1px;
}

.theme-dark-btn:hover {
  background-position: 100% 0;
  border: 1px solid #1ACC8D;
}

.theme-dark-btn:focus {
  background-color: #1ACC8D;
}

.theme-dark-btn:active {
  background-color: #1ACC8D;
}

.btn {
  height: 38px;
  line-height: 35px;
  text-align: center;
  padding: 0 18px;
  text-transform: uppercase;
  transition: background-image .3s linear;
  transition: box-shadow .3s linear;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  font-size: 12px !important;
}

.btn:focus {
  background: #1ACC8D;
}

<div class="col">
  <button class="btn theme-dark-btn" type="button" style="color: white" id="1Year" autofocus>1 Year</button>
  <button class="btn theme-dark-btn" style="color: white" id="5Year">5 Years</button>
  <button class="btn theme-dark-btn" style="color: white" id="10Year">10 Years</button>
  <button class="btn theme-dark-btn" style="color: white" id="20Year">20 Years</button>
</div>

Answered By - Mina