My web-app is about forecasting on sports games. My page shows all the matches and the points you can get out of each outcome from a match (Madrid = 12 points VS Barcelone = 15 points). So a user check a box from a match and select for him the right outcome. I would like each time the user check a box, to show him the number of boxes he checked.
Here is my Javascript to count the box checked :
JavaScript
x
5
1
const updateCount = function() {2
var x = document.querySelectorAll(".square:checked").length;3
document.querySelector(".plus").innerHTML = x;4
};5
Here is the HTML where the number of box checked will be displayed
JavaScript
1
6
1
<div class=" d-flex pt-2">2
<h3 class="typos">Matchs pronostiqués</h3>3
<h3 class="typos pts" style="font-weight: bold; padding-left: 5px;"><%= current_user.forecasts.where(confirmed: true, season_id: Season.last.id).count %>/50</h3>4
<span class="plus"></span>5
</div>6
Here is my Javascript in order to know which game the user forecasted and which outcome he selected :
JavaScript
1
36
36
1
const selectOutcome = () => {2
const selects = document.querySelectorAll(".square");3
selects.forEach((outcome)=>{4
outcome.addEventListener("click",(event) => {5
$('input[type="checkbox"]').on('change', function() {6
$(this).siblings('input[type="checkbox"]').not(this).prop('checked', false);7
});8
const result = event.currentTarget.dataset.outcome;9
console.log(result);10
const id = event.currentTarget.parentNode.dataset.id;11
console.log(id);12
const box = event.currentTarget.checked;13
console.log(box);14
const url = 'store_outcome?result='+result+'&match='+id+'&box='+box15
fetch(url)16
.then(response => response.json())17
.then((data) => {18
console.log(data);19
});20
});21
});22
}23
24
const validePanier = () => {25
const panier = document.getElementById('panier');26
panier.addEventListener("click", (event) =>{27
console.log("click")28
const player = document.getElementById('season_player').value;29
fetch('confirm_pending?player='+player)30
.then(response => response.json())31
.then((data) => {32
console.log(data);33
});34
})35
}36
Here is my HTML, for each match I have in my database, a match is going to appear in front in this way.
JavaScript
1
30
30
1
<% @matches.each do |match| %>2
<% if Time.parse(match.kick_off) > Time.now && current_user.forecasts.find_by(match_id: match.id, confirmed: true).nil? && match.points_home.present? %>3
<% if match.sport == "football" %>4
<div class="d-flex justify-content-center mb-2 mt-2">5
<h4 class="typopo"><%= match.league %></h4>6
</div>7
<div class="d-flex justify-content-center mb-2 mt-2">8
<h3 class="tit"><%= DateTime.parse(match.kick_off).to_date%></h3><h3 class="typopo pl-2">-</h3>9
<h3 class="typopo pl-2"><%= match.kick_off.to_s.gsub("T", " ").split[1].gsub("+", " ").split[0]%></h3>10
</div>11
<div class="d-flex flex-row justify-content-around mb-4 mt-4" data-id="<%= match.id %>">12
<div class="d-flex flex-column align-items-center col-4">13
<div class="row">14
<h3 class="typopo"><%= image_tag "#{match.team_home_logo_url}", width: 50 %></h3>15
</div>16
<div class="row text-align-center">17
<h3 class="tit"><%= match.team_home %></h3>18
</div>19
</div>20
<div class="d-flex flex-column justify-content-center">21
<p class="typopo text-center">VS</p>22
<div class="d-flex flex-row align-items-center col-4">23
<div class="displaysquares" data-id="<%= match.id %>">24
<input type="checkbox" class="square" onclick="updateCount()" data-outcome="1"></input>25
<input type="checkbox" class="square" onclick="updateCount()" data-outcome="NULL"></input>26
<input type="checkbox" class="square" onclick="updateCount()" data-outcome="2"></input>27
</div>28
</div>29
</div>30
There is a data-id. The purpose is when a user check a box, I can get the id of the match, in order to create the right forecast for the right game.
Advertisement
Answer
I would delegate instead of having inline event handlers
Here I COUNT the checkboxes – why do you not want the VALUE of a checked RADIO?
Note I wrapped all matches in <div id="matches">...</div>
JavaScript
1
8
1
document.getElementById("matches").addEventListener("change", function(e) {2
const tgt = e.target;3
if (tgt.classList.contains("square")) {4
const parent = tgt.closest(".displaysquares");5
var x = parent.querySelectorAll(".square:checked").length;6
document.querySelector(".plus").innerHTML += parent.dataset.id + ": " + x +"<br/>" ;7
}8
})JavaScript
1
64
64
1
<span class="plus"></span>2
<div id="matches">3
<div class="d-flex justify-content-center mb-2 mt-2">4
<h4 class="typopo">League 1</h4>5
</div>6
<div class="d-flex justify-content-center mb-2 mt-2">7
<h3 class="tit">8
Some date9
</h3>10
<h3 class="typopo pl-2">-</h3>11
<h3 class="typopo pl-2">Some string</h3>12
</div>13
<div class="d-flex flex-row justify-content-around mb-4 mt-4" data-id="MATCH 1">14
<div class="d-flex flex-column align-items-center col-4">15
<div class="row">16
<h3 class="typopo">TEAM LOGO </h3>17
</div>18
<div class="row text-align-center">19
<h3 class="tit">Some other team string</h3>20
</div>21
</div>22
<div class="d-flex flex-column justify-content-center">23
<p class="typopo text-center">VS</p>24
<div class="d-flex flex-row align-items-center col-4">25
<div class="displaysquares" data-id="MATCH 1">26
<input type="checkbox" class="square" data-outcome="1">27
<input type="checkbox" class="square" data-outcome="NULL">28
<input type="checkbox" class="square" data-outcome="2">29
</div>30
</div>31
</div>32
</div>33
34
<div class="d-flex justify-content-center mb-2 mt-2">35
<h4 class="typopo">League 2</h4>36
</div>37
<div class="d-flex justify-content-center mb-2 mt-2">38
<h3 class="tit">39
Some date40
</h3>41
<h3 class="typopo pl-2">-</h3>42
<h3 class="typopo pl-2">Some string</h3>43
</div>44
<div class="d-flex flex-row justify-content-around mb-4 mt-4" data-id="MATCH 2">45
<div class="d-flex flex-column align-items-center col-4">46
<div class="row">47
<h3 class="typopo">TEAM LOGO </h3>48
</div>49
<div class="row text-align-center">50
<h3 class="tit">Some other team string</h3>51
</div>52
</div>53
<div class="d-flex flex-column justify-content-center">54
<p class="typopo text-center">VS</p>55
<div class="d-flex flex-row align-items-center col-4">56
<div class="displaysquares" data-id="MATCH 2">57
<input type="checkbox" class="square" data-outcome="1">58
<input type="checkbox" class="square" data-outcome="NULL">59
<input type="checkbox" class="square" data-outcome="2">60
</div>61
</div>62
</div>63
</div>64
</div>Using Radios instead
JavaScript
1
8
1
const matches = document.getElementById("matches")2
matches.addEventListener("change", function(e) {3
const tgt = e.target;4
if (tgt.classList.contains("square")) {5
var x = [matches.querySelectorAll(".square:checked")].map(chk => chk.closest(".displaysquares").dataset.id + ": "+chk.dataset.outcome)6
document.querySelector(".plus").innerHTML = x.join("<br/>");7
}8
})JavaScript
1
64
64
1
<span class="plus"></span>2
<div id="matches">3
<div class="d-flex justify-content-center mb-2 mt-2">4
<h4 class="typopo">League 1</h4>5
</div>6
<div class="d-flex justify-content-center mb-2 mt-2">7
<h3 class="tit">8
Some date9
</h3>10
<h3 class="typopo pl-2">-</h3>11
<h3 class="typopo pl-2">Some string</h3>12
</div>13
<div class="d-flex flex-row justify-content-around mb-4 mt-4" data-id="MATCH 1">14
<div class="d-flex flex-column align-items-center col-4">15
<div class="row">16
<h3 class="typopo">TEAM LOGO </h3>17
</div>18
<div class="row text-align-center">19
<h3 class="tit">Some other team string</h3>20
</div>21
</div>22
<div class="d-flex flex-column justify-content-center">23
<p class="typopo text-center">VS</p>24
<div class="d-flex flex-row align-items-center col-4">25
<div class="displaysquares" data-id="MATCH 1">26
<input type="radio" name="outcome1" class="square" data-outcome="1">27
<input type="radio" name="outcome1" class="square" data-outcome="NULL">28
<input type="radio" name="outcome1" class="square" data-outcome="2">29
</div>30
</div>31
</div>32
</div>33
34
<div class="d-flex justify-content-center mb-2 mt-2">35
<h4 class="typopo">League 2</h4>36
</div>37
<div class="d-flex justify-content-center mb-2 mt-2">38
<h3 class="tit">39
Some date40
</h3>41
<h3 class="typopo pl-2">-</h3>42
<h3 class="typopo pl-2">Some string</h3>43
</div>44
<div class="d-flex flex-row justify-content-around mb-4 mt-4" data-id="MATCH 2">45
<div class="d-flex flex-column align-items-center col-4">46
<div class="row">47
<h3 class="typopo">TEAM LOGO </h3>48
</div>49
<div class="row text-align-center">50
<h3 class="tit">Some other team string</h3>51
</div>52
</div>53
<div class="d-flex flex-column justify-content-center">54
<p class="typopo text-center">VS</p>55
<div class="d-flex flex-row align-items-center col-4">56
<div class="displaysquares" data-id="MATCH 2">57
<input type="radio" name="outcome2" class="square" data-outcome="1">58
<input type="radio" name="outcome2" class="square" data-outcome="NULL">59
<input type="radio" name="outcome2" class="square" data-outcome="2">60
</div>61
</div>62
</div>63
</div>64
</div>