Tengo esto:

 <div class="cable-config"> <span>Select Entries</span> <div class="cable-choose"> <button id="Home" value="5.00">50 Entries<br>$5.00</button> <button value="10.00">100 Entries<br>$10.00</button> <button>250 Entries<br>$25.00</button> <button>500 Entries<br>$50.00</button> </div> <p>By entering, you agree to our Terms of Service, Official Rules, and Privacy Policy.</p> </div> </div> <script> var buttonValue = "" $('button').on('click', function(){ $('button').removeClass('active_button'); $(this).addClass('active_button'); // var fired_button = $(this).val(); // alert(fired_button); }); //Home button active on page load $(document).ready(function(){ $('#Home').addClass('active_button'); });

lo que hace al hacer clic en el botón, establezca la class en active_button .

Ahora, lo que estoy tratando de hacer es obtener el valor de la clase active_button cuando hago clic en un nuevo botón. Como puede ver, trato de recuperar el valor de active_button , pero devuelve undefined. ¿Qué estoy haciendo mal?

 function myfunction() { var valueOfButton = $('active_button').val(); console.log(valueOfButton); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="cable-config"> <span>Select Entries</span> <div class="cable-choose"> <button id="Home" value="5.00">50 Entries<br>$5.00</button> <button value="10.00">100 Entries<br>$10.00</button> <button>250 Entries<br>$25.00</button> <button>500 Entries<br>$50.00</button> </div> <p>By entering, you agree to our Terms of Service, Official Rules, and Privacy Policy.</p> </div> <div class="product-price"> <button onclick="myfunction()" class="cart-btn">Continue To Payment</button> </div>