When I count box which are checked, it counts plus one box

Question

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 :

    const updateCount = function() {
      var x = document.querySelectorAll(".square:checked").length;
      document.querySelector(".plus").innerHTML = x;
    };

Here is the HTML where the number of box checked will be displayed


            Matchs pronostiqués
            <%= current_user.forecasts.where(confirmed: true, season_id: Season.last.id).count %>/50

Here is my Javascript in order to know which game the user forecasted and which outcome he selected :

const selectOutcome = () => {
  const selects = document.querySelectorAll(".square");
  selects.forEach((outcome)=>{
    outcome.addEventListener("click",(event) => {
  $('input[type="checkbox"]').on('change', function() {
   $(this).siblings('input[type="checkbox"]').not(this).prop('checked', false);
});
      const result = event.currentTarget.dataset.outcome;
      console.log(result);
      const id = event.currentTarget.parentNode.dataset.id;
      console.log(id);
      const box = event.currentTarget.checked;
      console.log(box);
      const url = 'store_outcome?result='+result+'&match='+id+'&box='+box
      fetch(url)
        .then(response => response.json())
        .then((data) => {
      console.log(data);
      });
    });
  });
}

const validePanier = () => {
  const panier = document.getElementById('panier');
  panier.addEventListener("click", (event) =>{
    console.log("click")
    const player = document.getElementById('season_player').value;
    fetch('confirm_pending?player='+player)
    .then(response => response.json())
    .then((data) => {
    console.log(data);
    });
  })
}

Here is my HTML, for each match I have in my database, a match is going to appear in front in this way.

    <% @matches.each do |match| %>
          <% if Time.parse(match.kick_off) > Time.now && current_user.forecasts.find_by(match_id: match.id, confirmed: true).nil? && match.points_home.present? %>
          <% if match.sport == "football" %>
        
          <%= match.league %>
        
        
          <%= DateTime.parse(match.kick_off).to_date%>
-
          <%= match.kick_off.to_s.gsub("T", " ").split[1].gsub("+", " ").split[0]%>
        
        
          
            
              <%= image_tag "#{match.team_home_logo_url}", width: 50 %>
            
            
              <%= match.team_home %>
            
          
          
            VS

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.

user_295783 · 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

...

document.getElementById("matches").addEventListener("change", function(e) {
  const tgt = e.target;
  if (tgt.classList.contains("square")) {
    const parent = tgt.closest(".displaysquares");
    var x = parent.querySelectorAll(".square:checked").length;
    document.querySelector(".plus").innerHTML += parent.dataset.id + ": " + x +"
" ;
  }
})



  
    League 1
  
  
    
      Some date
    
    -
    Some string
  
  
    
      
        TEAM LOGO 
      
      
        Some other team string
      
    
    
      VS
      
        
          
          
          
        
      
    
  

  
    League 2
  
  
    
      Some date
    
    -
    Some string
  
  
    
      
        TEAM LOGO 
      
      
        Some other team string
      
    
    
      VS

Using Radios instead

const matches = document.getElementById("matches")
matches.addEventListener("change", function(e) {
  const tgt = e.target;
  if (tgt.classList.contains("square")) {
    var x = [...matches.querySelectorAll(".square:checked")].map(chk => chk.closest(".displaysquares").dataset.id + ": "+chk.dataset.outcome)
    document.querySelector(".plus").innerHTML = x.join("
");
  }
})



  
    League 1
  
  
    
      Some date
    
    -
    Some string
  
  
    
      
        TEAM LOGO 
      
      
        Some other team string
      
    
    
      VS
      
        
          
          
          
        
      
    
  

  
    League 2
  
  
    
      Some date
    
    -
    Some string
  
  
    
      
        TEAM LOGO 
      
      
        Some other team string
      
    
    
      VS

When I count box which are checked, it counts plus one box

1 Answers