I have The following code with buttons that append selections to the "cart" div on click
In The first Script, Its function is to allow only one selection per row
whenever multiple buttons in the same row are clicked.
In the second script, its function is to append the selections to the "cart" div
and remove if choice has been unselected.
The problem comes in when I click on multiple buttons in the same row, the first script seems to work just fine as in it de-actives the previous one and activates the current button clicked, the second script is supposed to remove the previous selection in the same row and update the new selection for the current button that is active
How do I get to edit my second script to cater for this functionality?
<body style ="margin:10px;">
<div class="cart">
<div id="box" class="boxlit"></div><br>
</div>
<table id="Table1" class="Fixtures-Table">
<thead class="disnon">
<tr>
<th>League</th>
<th>Home [1]</th>
<th>Draw [x]</th>
<th>Away [2]</th>
<th>Kickoff</th>
</tr>
</thead>
<tr class="items" style="display: table-row;">
<td class="addItem">Almagro-Temperley</td>
<td id="bbox"><input type="button" class="decimals" id="3" value="1.95" data-selected="false"></td>
<td id="bbox"><input type="button" class="decimals" id="4" value="2.95" data-selected="false"></td>
<td id="bbox"><input type="button" class="decimals" id="5" value="3.90" data-selected="false"></td>
<td id="date">8/1/2022 8:00:00 PM</td>
</tr>
<tr class="items" style="display: table-row;">
<td class="addItem">Guillermo Brown-Santamarina</td>
<td id="bbox"><input type="button" class="decimals" id="6" value="1.65" data-selected="false"></td>
<td id="bbox"><input type="button" class="decimals" id="7" value="3.25" data-selected="false"></td>
<td id="bbox"><input type="button" class="decimals" id="8" value="5.10" data-selected="false"></td>
<td id="date">8/1/2022 8:00:00 PM</td>
</tr>
<tr class="items" style="display: table-row;">
<td class="addItem">Nueva Chicago-CSD Flandria</td>
<td id="bbox"><input type="button" class="decimals" id="9" value="2.25" data-selected="false"></td>
<td id="bbox"><input type="button" class="decimals" id="10" value="2.85" data-selected="false"></td>
<td id="bbox"><input type="button" class="decimals" id="11" value="3.15" data-selected="false"></td>
<td id="date">8/1/2022 8:00:00 PM</td>
</tr>
</table>
</body>
</html>
In this script, Its function is to allow only one selection per row
whenever multiple buttons in the same row are clicked.
<script>
$(document).ready(function(){
$('.decimals').click(function() {
if ($(this).attr('data-selected') === 'true') {
$(this).attr('data-selected', 'false');
$(this).removeClass('active');
} else {
$(this).closest('tr').find('.decimals').not(this)
.removeClass('active').attr('data-selected', 'false');
$(this).attr('data-selected', 'true');
$(this).addClass('active');
}
});
});
</script>
In this script, its function is to append the selections to the "cart" div
and remove if choice has been unselected.
its supposed to remove the previous selection in the same row and append or update the new selection for the current button that is active
<script>
let $th = $('#Table1 thead th');
$(".decimals").on('click', e => {
let $btn = $(e.target);
let $option = $(`.box[data-id="${$btn.prop('id')}"]`);
let $tr = $btn.closest('tr');
let selectionIndex = $btn.closest('td').index();
let kickoff = $tr.find('td:last').text().trim();
let match = $tr.find('td:first').text().trim();
let result = $th.eq(selectionIndex).text().trim();
let value = $btn.val();
if ($option.length){
$option.remove();
return;
}
$("#box").append(`<div class="box" data-id="${$btn.prop('id')}">${match}<br>${result}<div class="crtTotal">${value}</div><input type="hidden" name="kickoff[]" value="${kickoff}"/><input type="hidden" name="match[]" value="${match}"/><input type="hidden" name="result[]" value="${result}" readonly/><input type="hidden" name="value[]" value="${value}"/></div>`);
});
</script>
.decimals {
background-color: rgb(31, 31, 31);
color: rgb(255, 255, 255);
border: 2px solid #0e1516;
border-radius: 4px;
font-size: 13px;
padding: 4px 10px;
font-weight: bold;
border-width: 1px;
cursor: pointer;
}
.decimals:hover {
background: rgb(51, 51, 51);
}
.active,
.active:hover {
background: rgb(161, 0, 0);
color: rgb(255, 255, 255);
border-color: rgb(156, 0, 0);
}
3
Answers
So I decided to add a section that calculates total odds and total payout to the cart using the reduce method and I'm having a small problem with the calculation when appending the first selection, It seems to only calculate after the second button click, whenever I click on another button, the total starts calculation on the second click, it feels like its one step back when It appends other selections
here is the code for the cart
This Is the code that calculates the total odds and payout of selections
I tried tracking where the problem is coming from and it seems to be at the
setTimeoutsection,It appends the values to the cart, how do I correct my code to calculate from the first button click?
As far as I understood the the issue was with removing the existing appended cart div. I did something hoping it would fix your issue.
But it may be better to just updates the values as in my code flickering occurs.
The set timeout was causing the issue. I adjusted it in the following code:
When changing the stake it is also updating now I added a small line.