How Can I Cascade Radio Buttons In Javascript?

Question

I'm new to programming and am tasked with creating a clickable tournament bracket. 8 teams, where you can pick the winners who will advance to the next round.

The problem I'm running into is when a person would want to revise picks in the first or second round after filling out the bracket.

For example in the first round the user picks:

Team1 v. Team8 --> #1 moves on
Team4 v. Team5 --> #4 moves on
Team3 v. Team6 --> #3 moves on
Team2 v. Team7 --> #2 moves on

In the Second Round let's say they pick:

Team1 v. Team4 --> #1 moves on
Team2 v. Team3 --> #2 moves on

In the Finals, they pick:

Team1 v. Team2 --> #1 wins.

Then, let's say the user changes their mind and picks Team8 to upset Team1 in the first round. Right now the code would still show Team1 as the winner and in the final game. How can I remove the text for the future rounds that currently shows Team1?

Attaching JSFiddle here: https://jsfiddle.net/a4hya2c7/5/ or see below code:



   
      Button
   
   
      First Round
      
         #1
         #8

         #4
         #5

         #3
         #6

         #7
         #2

      
      

      Second Round
      
         
         

         
         

      
      

      Finals
      
         
         

      
      

      Winner

JS:

function changeText(value) {
    document.getElementById('r9').innerHTML = value;
    document.getElementById('i9').value = value;
}

function changeText2(value) {
    document.getElementById('r10').innerHTML = value;
    document.getElementById('i10').value = value;
}

function changeText3(value) {
    document.getElementById('r11').innerHTML = value;
    document.getElementById('i11').value = value;
}

function changeText4(value) {
    document.getElementById('r12').innerHTML = value;
    document.getElementById('i12').value = value;
}

function changeText5(value) {
    document.getElementById('r13').innerHTML = value;
    document.getElementById('i13').value = value;
}

function changeText6(value) {
    document.getElementById('r14').innerHTML = value;
    document.getElementById('i14').value = value;
}
function changeText7(value) {
    document.getElementById('r15').innerHTML = value;
    document.getElementById('r15').value = value;
}

Isac · Accepted Answer

Firstly your tags aren't correct as you can see here:

You are using the close tag without the opening. You can either use:

Or use the newer html5 self closing tags style:

As to the JS itself, you can simplify it a lot if you use an attribute, similar as the name you are already using to point where it must put the value. With that change the code would be a lot smaller and simpler:

const inputs = document.querySelectorAll("input[type=radio]"); 

for (let inp of inputs){
  inp.addEventListener("change", function(){
    let targetLabel = document.getElementById(inp.dataset.target);    
    targetLabel.previousSibling.value = inp.value;
    targetLabel.innerHTML = inp.value;    
  });
}

First Round
      
         #1
         #8

         #4
         #5

         #3
         #6

         #7
         #2

      
      

      Second Round
      
         
         

         
         

      
      

      Finals
      
         
         

      
      

      Winner

Note that the targets i set were directly to the labels:

Then to get to the corresponding radio i used previousSibling.

I used several functions that you may not know:

querySelectorAll - to get an array of elements matching the selector passed
for ... of to iterate on all inputs retrieved by the querySelectorAll
addEventListener - to set the event handler directly on Javascript and make the code cleaner

And with just those little lines of Javascript you have the same functionality, and most importantly, without code duplication.

Now if you want to cascade a change on the first radios to the lower ones, you can call the change event directly with:

const event = new Event('change');
element.dispatchEvent(event);

Whenever you see that the target element already has a value set. This works like a recursive call:

const inputs = document.querySelectorAll("input[type=radio]"); 

for (let inp of inputs){
  inp.addEventListener("change", function(){
    let targetLabel = document.getElementById(inp.dataset.target);
    let targetRadio = targetLabel.previousSibling;
    targetRadio.value = inp.value;
    targetLabel.innerHTML = inp.value;
	
    //if this isn't the last and it's checked, to not cascade non selected radios
    if (targetRadio.hasAttribute && targetRadio.checked){ 
      const nextTargetLabel = document.getElementById(targetRadio.dataset.target);

      if (nextTargetLabel.innerHTML != ''){ //if it has a value then cascade
          targetRadio.dispatchEvent(new Event('change'));
      }
    }
  });
}

First Round
      
         #1
         #8

         #4
         #5

         #3
         #6

         #7
         #2

      
      

      Second Round
      
         
         

         
         

      
      

      Finals
      
         
         

      
      

      Winner

Edit:

To clear the following radios instead of cascading the values you can use a while, and navigating with the targets until you reach the end:

const inputs = document.querySelectorAll("input[type=radio]"); 

for (let inp of inputs){
  inp.addEventListener("change", function(){
    let targetLabel = document.getElementById(inp.dataset.target);
    let targetRadio = targetLabel.previousSibling;
    targetLabel.innerHTML = inp.value;
    targetRadio.value = inp.value;

     //while there is a next target clear it
    while (targetLabel.previousSibling.hasAttribute){
      targetLabel = document.getElementById(targetRadio.dataset.target);
      targetRadio = targetLabel.previousSibling;
      targetRadio.checked = false;
      targetLabel.innerHTML = '';
    }
  });
}

First Round
      
         #1
         #8

         #4
         #5

         #3
         #6

         #7
         #2

      
      

      Second Round
      
         
         

         
         

      
      

      Finals
      
         
         

      
      

      Winner

How Can I Cascade Radio Buttons In Javascript?

Answers (1)

Related Questions