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?
JavaScript
x
61
61
1
<body style ="margin:10px;">2
3
4
<div class="cart">5
6
<div id="box" class="boxlit"></div><br>7
8
</div>9
10
11
<table id="Table1" class="Fixtures-Table">12
13
14
<thead class="disnon">15
<tr> 16
<th>League</th>17
<th>Home [1]</th>18
<th>Draw [x]</th>19
<th>Away [2]</th>20
<th>Kickoff</th>21
</tr>22
</thead>23
24
25
<tr class="items" style="display: table-row;">26
27
<td class="addItem">Almagro-Temperley</td> 28
<td id="bbox"><input type="button" class="decimals" id="3" value="1.95" data-selected="false"></td>29
<td id="bbox"><input type="button" class="decimals" id="4" value="2.95" data-selected="false"></td>30
<td id="bbox"><input type="button" class="decimals" id="5" value="3.90" data-selected="false"></td>31
<td id="date">8/1/2022 8:00:00 PM</td> 32
33
</tr>34
35
<tr class="items" style="display: table-row;">36
37
<td class="addItem">Guillermo Brown-Santamarina</td> 38
<td id="bbox"><input type="button" class="decimals" id="6" value="1.65" data-selected="false"></td>39
<td id="bbox"><input type="button" class="decimals" id="7" value="3.25" data-selected="false"></td>40
<td id="bbox"><input type="button" class="decimals" id="8" value="5.10" data-selected="false"></td>41
<td id="date">8/1/2022 8:00:00 PM</td> 42
43
</tr>44
45
<tr class="items" style="display: table-row;">46
47
<td class="addItem">Nueva Chicago-CSD Flandria</td> 48
<td id="bbox"><input type="button" class="decimals" id="9" value="2.25" data-selected="false"></td>49
<td id="bbox"><input type="button" class="decimals" id="10" value="2.85" data-selected="false"></td>50
<td id="bbox"><input type="button" class="decimals" id="11" value="3.15" data-selected="false"></td>51
<td id="date">8/1/2022 8:00:00 PM</td> 52
53
</tr>54
55
</table>56
57
58
</body>59
60
</html>61
In this script, Its function is to allow only one selection per row whenever multiple buttons in the same row are clicked.
JavaScript
1
29
29
1
<script>2
3
$(document).ready(function(){4
5
$('.decimals').click(function() { 6
7
if ($(this).attr('data-selected') === 'true') {8
9
$(this).attr('data-selected', 'false');10
11
$(this).removeClass('active');12
13
} else {14
15
$(this).closest('tr').find('.decimals').not(this)16
17
.removeClass('active').attr('data-selected', 'false');18
19
$(this).attr('data-selected', 'true');20
21
$(this).addClass('active');22
23
}24
25
});26
});27
28
</script>29
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
JavaScript
1
35
35
1
<script>2
3
4
let $th = $('#Table1 thead th');5
6
$(".decimals").on('click', e => {7
8
let $btn = $(e.target);9
let $option = $(`.box[data-id="${$btn.prop('id')}"]`);10
11
let $tr = $btn.closest('tr');12
let selectionIndex = $btn.closest('td').index();13
14
let kickoff = $tr.find('td:last').text().trim();15
let match = $tr.find('td:first').text().trim();16
17
let result = $th.eq(selectionIndex).text().trim();18
let value = $btn.val();19
20
if ($option.length){21
$option.remove();22
23
return;24
}25
26
$("#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>`);27
28
29
});30
31
32
</script>33
34
35
JavaScript
1
26
26
1
.decimals {2
background-color: rgb(31, 31, 31);3
color: rgb(255, 255, 255);4
border: 2px solid #0e1516;5
border-radius: 4px;6
font-size: 13px;7
padding: 4px 10px;8
font-weight: bold;9
border-width: 1px;10
cursor: pointer;11
}12
13
.decimals:hover {14
background: rgb(51, 51, 51);15
}16
17
.active,18
.active:hover {19
20
background: rgb(161, 0, 0);21
color: rgb(255, 255, 255);22
border-color: rgb(156, 0, 0);23
24
}25
26
Advertisement
Answer
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.
JavaScript
1
38
38
1
let $th = $('#Table1 thead th');2
3
$('.decimals').click(function(e) { 4
5
let $btn = $(e.target);6
let $option = $(`.box[data-id="${$btn.prop('id')}"]`);7
8
let $tr = $btn.closest('tr');9
let selectionIndex = $btn.closest('td').index();10
11
let kickoff = $tr.find('td:last').text().trim();12
let match = $tr.find('td:first').text().trim();13
14
let result = $th.eq(selectionIndex).text().trim();15
let value = $btn.val();16
17
var knowit = $(this).closest('.items').find('.addItem').text();18
19
var radiovalue = $(this).attr('value');20
21
22
if ($('.boxlit .box:contains("'+knowit+'")').length < 1) {23
24
25
$("#box").append(`<div class="box" data-id="${$btn.prop('id')}">${match}<br><span>${result}</span><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>`);}26
27
else if ($(this).hasClass('active')) {28
$('.boxlit .box:contains("'+knowit+'")').remove()29
}30
31
32
else {33
$('.boxlit .box:contains("'+knowit+'") .crtTotal').text(radiovalue);34
35
$('.boxlit .box:contains("'+knowit+'") span').text(result);36
}37
38
})JavaScript
1
24
24
1
.decimals {2
background-color: rgb(31, 31, 31);3
color: rgb(255, 255, 255);4
border: 2px solid #0e1516;5
border-radius: 4px;6
font-size: 13px;7
padding: 4px 10px;8
font-weight: bold;9
border-width: 1px;10
cursor: pointer;11
}12
13
.decimals:hover {14
background: rgb(51, 51, 51);15
}16
17
.active,18
.active:hover {19
20
background: rgb(161, 0, 0);21
color: rgb(255, 255, 255);22
border-color: rgb(156, 0, 0);23
24
}JavaScript
1
148
148
1
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>2
3
4
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>5
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>6
<body style ="margin:10px;">7
8
9
<div class="cart">10
11
<div id="box" class="boxlit"></div><br>12
13
<div class="shift">14
15
<div>Total Odds: <b id="ct1">0.00</b></div><br>16
17
<div>(N$)Stake: <input id="stake" type ="number" name="stake[]" value="5"> NAD</div><br>18
19
<div>Payout: N$ <b id="payout">0.00</b></div>20
21
<input class="bet1" type="submit" name="submit" value="Bet">22
23
</div>24
25
</div>26
27
28
<table id="Table1" class="Fixtures-Table">29
30
31
<thead class="disnon">32
<tr> 33
<th>League</th>34
<th>Home [1]</th>35
<th>Draw [x]</th>36
<th>Away [2]</th>37
<th>Kickoff</th>38
</tr>39
</thead>40
41
42
<tr class="items" style="display: table-row;">43
44
<td class="addItem">Almagro-Temperley</td> 45
<td id="bbox"><input type="button" class="decimals" id="3" value="1.95" data-selected="false"></td>46
<td id="bbox"><input type="button" class="decimals" id="4" value="2.95" data-selected="false"></td>47
<td id="bbox"><input type="button" class="decimals" id="5" value="3.90" data-selected="false"></td>48
<td id="date">8/1/2022 8:00:00 PM</td> 49
50
</tr>51
52
<tr class="items" style="display: table-row;">53
54
<td class="addItem">Guillermo Brown-Santamarina</td> 55
<td id="bbox"><input type="button" class="decimals" id="6" value="1.65" data-selected="false"></td>56
<td id="bbox"><input type="button" class="decimals" id="7" value="3.25" data-selected="false"></td>57
<td id="bbox"><input type="button" class="decimals" id="8" value="5.10" data-selected="false"></td>58
<td id="date">8/1/2022 8:00:00 PM</td> 59
60
</tr>61
62
<tr class="items" style="display: table-row;">63
64
<td class="addItem">Nueva Chicago-CSD Flandria</td> 65
<td id="bbox"><input type="button" class="decimals" id="9" value="2.25" data-selected="false"></td>66
<td id="bbox"><input type="button" class="decimals" id="10" value="2.85" data-selected="false"></td>67
<td id="bbox"><input type="button" class="decimals" id="11" value="3.15" data-selected="false"></td>68
<td id="date">8/1/2022 8:00:00 PM</td> 69
70
</tr>71
72
</table>73
74
75
<script>76
77
$(document).ready(function(){78
79
$('.decimals').click(function() { 80
81
if ($(this).attr('data-selected') === 'true') {82
83
$(this).attr('data-selected', 'false');84
85
$(this).removeClass('active');86
87
} else {88
89
$(this).closest('tr').find('.decimals').not(this)90
91
.removeClass('active').attr('data-selected', 'false');92
93
$(this).attr('data-selected', 'true');94
95
$(this).addClass('active');96
97
}98
99
});100
});101
102
</script>103
104
105
106
<script>107
108
$(document).ready(function(){109
110
$('.decimals').click(function(e) { 111
updateoddsnpayout();112
})113
114
$('body').on('change', '#stake', function(e){115
updateoddsnpayout();116
})117
118
var updateoddsnpayout = function(e) {119
let values = $('.crtTotal').map((i, el) => parseFloat(el.textContent)).get();120
let total = values.reduce((a, b) => a * b, values.length > 0 ? 1 : 0);121
let eq = 0122
let tot = eq += total123
124
125
$('#ct1').text(tot.toFixed(2)).val()126
$('#todds').val(tot.toFixed(2)).val()127
128
129
var z = 0130
var x = parseFloat($('#ct1').text()?? 0);131
var y = parseFloat($('#stake').val()?? 0);132
var net = z + x * y133
$("#payout").text(net.toFixed(2)).val();134
$("#inp").val(net.toFixed(2)).val();135
136
}137
})138
139
140
</script>141
142
143
144
145
146
147
148
</body>