Getting the value of the last clicked item from an array

Question

Update # 2: Updated scripts.

goal

a) The user selects a button. The value of the last button pressed + .current__amount = new__amount

b) There is no current total amount. When you press the same button again, cancel the selection, and then subtract this value from .new__amount , then change the placeholder text using .html()

Problem

That's right, now for some reason, clicking on a button does not add or remove its value from .new__amount .

I am console.log(buttons[i].value) and console.log(buttons[i].class) and I see that the for loop prints the class and value of these six buttons that represent the bid at a quiet auction of $10, 25, 50 and stored in an array called var buttons = [] as I want.

scripts.js (updated)

Almost there. You just need to make sure that you can select only one button at a time.

 /*------------------------------------- STEP ONE: PLACE BID --------------------------------------*/ $.ajax({ url: "https://sheetsu.com/apis/4a8eceba", method: "GET", dataType: "json" }).then(function(spreadsheet) { // Print current bid var currentBid = spreadsheet.result.pop().Bids; $(".current__amount").html("$" +currentBid); $('.button__form').on('click', function() { var value = $(this).val(); if($(this).hasClass('is-selected')) { $(this).removeClass('is-selected'); $(".check--one").css("color", "#ccc"); currentBid = parseInt(currentBid) - parseInt(value); } else { $(this).addClass('is-selected'); $(".check--one").css("color", "#ffdc00"); currentBid = parseInt(currentBid) + parseInt(value); } $('.total__amount').html("$" + currentBid); }); }); 

Answer 1

this is not entirely specific to your question structure, but it should give you an idea of ​​how it can work.

 $(document).ready(function() { var totalAmount = 0; $('.button__form').on('click', function() { var value = $(this).val(); if($(this).hasClass('selected')) { $(this).removeClass('selected'); totalAmount = parseInt(totalAmount) - parseInt(value); } else { $(this).addClass('selected'); totalAmount = parseInt(totalAmount) + parseInt(value); } $('.total').html(totalAmount); }); }); 

 .selected { color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="button__form" value=10>10</button> <button class="button__form" value=25>25</button> <button class="button__form" value=50>50</button> <button class="button__form" value=100>100</button> <button class="button__form" value=250>250</button> <button class="button__form" value=500>500</button> <br/><br/> <div class="total"><div> 

EDIT with the ability to select one button at a time:

 $(document).ready(function() { var baseAmount = 0; var totalAmount = baseAmount; $('.button__form').on('click', function() { var value = $(this).val(); if($(this).hasClass('selected')) { $(this).removeClass('selected'); totalAmount = parseInt(totalAmount) - parseInt(value); } else { $('.button__form').removeClass('selected'); // remove selected css from all the other buttons $(this).addClass('selected'); totalAmount = baseAmount; // reset the totalAmount to the original base amount totalAmount = parseInt(totalAmount) + parseInt(value); } $('.total').html(totalAmount); }); }); 

 .selected { color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="button__form" value=10>10</button> <button class="button__form" value=25>25</button> <button class="button__form" value=50>50</button> <button class="button__form" value=100>100</button> <button class="button__form" value=250>250</button> <button class="button__form" value=500>500</button> <br/><br/> <div class="total"><div>