如何设置元素值并在加载 Javascript 时运行 function

Question

I'm trying to refactor a small Javascript function that simply adds an active class to the parent <div> of a series of radio buttons on page load as well as via a change.

My function is:

function toggleActiveState (event) {
  const el = event.target
  const parent = el.closest('[data-toggle-has-btn-group]')
  const buttons = parent.getElementsByClassName('js__btn-toggle')

  var i
  for (i = 0; i < buttons.length; i++) {
    buttons[i].classList.remove('active')
  }

  el.parentElement.classList.add('active')
}

My markup is:

<div class="form-group">
  <div class="btn-group-toggle d-flex flex-row" data-toggle="buttons" data-toggle-has-btn-group>
    <label class="btn btn-custom btn-outline-primary btn-sm active flex-fill mr-1 js__btn-toggle">
      <input type="radio" name="options" id="option1" value="Mr" checked onclick="toggleActiveState(event)"> Mr
    </label>
    <label class="btn btn-custom btn-outline-primary btn-sm flex-fill mx-1 js__btn-toggle">
      <input type="radio" name="options" id="option2" value="Mrs" onclick="toggleActiveState(event)"> Mrs
    </label>
    <label class="btn btn-custom btn-outline-primary btn-sm flex-fill mx-1 js__btn-toggle">
      <input type="radio" name="options" id="option3" value="Miss" onclick="toggleActiveState(event)"> Miss
    </label>
    <label class="btn btn-custom btn-outline-primary btn-sm flex-fill ml-1 js__btn-toggle">
      <input type="radio" name="options" id="option4" value="Other" onclick="toggleActiveState(event)"> Other
    </label>
  </div>
</div>

When clicking a radio button, the toggleActiveState(event) runs and I'm able to remove the active classes and add a class to the input I clicked.

I have multiple of these .btn-group-toggle elements on the page.

What I need to do is be able to set the active class state of say the Mrs element on page load and it's value by calling my function like so:

toggleActiveState('options', 'Mrs') and then this would be active, and selected...

Any ideas?

Answer 1

You can add event listener on window load and add the class there. Like I've done below based on your code.

 function toggleActiveState (event) { const el = event.target const parent = el.closest('[data-toggle-has-btn-group]') const buttons = parent.getElementsByClassName('js__btn-toggle') var i for (i = 0; i < buttons.length; i++) { buttons[i].classList.remove('active') } el.parentElement.classList.add('active') } window.addEventListener('load', () => { const checkedInput = document.querySelector('input[type="radio"]:checked'); checkedInput.parentElement.classList.add('active'); })

 .active { color: red; }

 <div class="form-group"> <div class="btn-group-toggle d-flex flex-row" data-toggle="buttons" data-toggle-has-btn-group> <label class="btn btn-custom btn-outline-primary btn-sm flex-fill mr-1 js__btn-toggle"> <input type="radio" name="options" id="option1" value="Mr" checked onclick="toggleActiveState(event)"> Mr </label> <label class="btn btn-custom btn-outline-primary btn-sm flex-fill mx-1 js__btn-toggle"> <input type="radio" name="options" id="option2" value="Mrs" onclick="toggleActiveState(event)"> Mrs </label> <label class="btn btn-custom btn-outline-primary btn-sm flex-fill mx-1 js__btn-toggle"> <input type="radio" name="options" id="option3" value="Miss" onclick="toggleActiveState(event)"> Miss </label> <label class="btn btn-custom btn-outline-primary btn-sm flex-fill ml-1 js__btn-toggle"> <input type="radio" name="options" id="option4" value="Other" onclick="toggleActiveState(event)"> Other </label> </div> </div>