Solution 1 :

You can set the radio button to the checked state by adding the .checked attribute.

var card = document.getElementsByName("payment");

card[0].addEventListener("change", function() {
  document.getElementById("something").innerHTML += "added content"
  card[0].checked = true
<div id="something">
  <input class="custom-control-input" type="radio" name="payment" id="creditCard" value="creditCard">

Problem :

var card = document.getElementsByName("payment");

card[0].addEventListener("click", function(){
document.getElementById("something").innerHTML += "added content"}) 
<div id="something">
<input class="custom-control-input" type="radio" name="payment" id="creditCard"value="creditCard">

I’ve added an event that adds more content to the form after an user clicks on radio button, but that radio button doesn’t change color on the first click, it does add content and after the second click on that button the color changes to selected. I want it to change the color on the first click, not the second


Comment posted by Harshana

Please add your code to the question

Comment posted by adam nikk

@HarshanaSerasinghe I’ve added a snippet