选择一个按钮激活 class

Question

these are the cards and I have written javascript to select the button and turn it into an active class but when I select the button it is not select and not turn into an active button where is the mistake

in the style tag, I have written what all I want to do when the button is hovered or is active

here is the javascript

 <script> // Add active class to the current button (highlight it) var header = document.getElementById("price"); var head = header.getElementsByClassName("card"); var btns = head.getElementsByClassName("btn"); for (var i = 0; i < btns.length; i++) { btns[i].addEventListener("click", function() { var current = document.getElementsByClassName("active"); if (current.length > 0) { current[0].className = current[0].className.replace(" active", ""); } this.className += " active"; }); } </script>

 .card.card-body a{ margin-bottom: 2.5rem; border: solid yellow; border-top-width: initial;important: color; white: background-color; transparent: font-size. 1;3rem: min-width;13rem. }.card:card-body a:hover{ color; #d6c926: {% comment %} border; none: {% endcomment %} {% comment %} border-bottom; solid blue: {% endcomment %} background-color; #191818cf: font-family;cursive: text-decoration; none: {% comment %} animation; border-line 3s ease forwards. {% endcomment %} }.card:card-body a,active. .card.card-body a:active{ background-color; #d6c926:important; color: black;important: border; black!important; font-family: cursive; }

 <div class="form-row" id="price"> <div class="card border-warning mb-3" style="max-width: 18rem;"> <div class="card-header"><strong>1 Mounth</strong></div> <div class="card-body text-warning"> <h5 class="card-title">Warning card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a class="btn btn-primary active 1_mon">Select This</a> </div> </div> <div class="card border-warning mb-3" style="max-width: 18rem;"> <div class="card-header"><strong>6 Mounth</strong></div> <div class="card-body text-warning"> <h5 class="card-title">Warning card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a class="btn btn-primary 6_mon">Select This</a> </div> </div> <div class="card border-warning mb-3" style="max-width: 18rem;"> <div class="card-header"><strong>10 Mounth</strong></div> <div class="card-body text-warning"> <h5 class="card-title">Warning card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a class="btn btn-primary 10_mon">Select This</a> </div> </div> </div>

after this, I have to take the value of the button and store it into a hidden input tag

Answer 1

try this:-

<script>
var btns = document.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function(){
  var current = document.getElementsByClassName("active");
  if (current.length > 0){ 
    current[0].className = current[0].className.replace(" active", "");
  }
  this.className += " active";
  });
}
</script>