Why my functionality doesn't work after conditionally innerHTML?

Question

I have a few checkboxes which represent subjects. And I have two custom(radio) select. I want to change innerHTML of my first select due to checkbox:checked length. If selected chekboxes length less than 3 I want to render different select options else another select options. When page load it works fine but after recheck my checkboxes I can not select any option from my first chekbox. Can someone please look at and help me

codepen link is also here

function subjectChange (){
    var subjectName = document.getElementsByName('subject-name');
    var questionSel = document.getElementsByClassName('options-container')[0];

    var checkBoxlength = 0;

    for(var i = 0; i < subjectName.length; i++) {
        if(subjectName[i].checked){
            checkBoxlength++
        }
    }
    if(checkBoxlength <= 3) {
        questionSel.innerHTML = `
        <label class="option">
            <input type="radio" class="radio first" value="5" name="question" checked>
            <span>5</span>
        </label>
        <label class="option">
            <input type="radio" class="radio first" value="10" name="question" checked>
            <span>10</span>
        </label>
        `;
    } else if(checkBoxlength >= 4) {
        questionSel.innerHTML = `
        <label class="option">
            <input type="radio" class="radio first" value="5" name="question" checked>
            <span>5</span>
        </label>
        <label class="option">
            <input type="radio" class="radio first" value="10" name="question" checked>
            <span>10</span>
        </label>
        <label class="option">
            <input type="radio" class="radio first" value="15" name="question" checked>
            <span>15</span>
         </label>
        `;
    }
 }

const selectBox = document.querySelectorAll('.select-box')

for(var i = 0; i < selectBox.length; i++) {

    const selected = selectBox[i].querySelector('.selected');
    const optionsContainer = selectBox[i].querySelector('.options-container');
    
    const optionList = selectBox[i].querySelectorAll('.option');
    
    selected.addEventListener('click', function(){
        optionsContainer.classList.toggle("active");
    })
        
    optionList.forEach( o => {
        var optionListItem= o.querySelectorAll('input[type="radio"]:checked + span');
         optionListItem.forEach(e => selected.innerHTML = e.innerHTML)

        o.addEventListener('click', function(){
            var optionListItem= o.querySelectorAll('input[type="radio"]:checked + span');
            optionListItem.forEach(e => selected.innerHTML = e.innerHTML)
            optionsContainer.classList.remove('active')

            var firstOptionList = document.querySelector('input[type="radio"]:checked');
            var secondOptionList = document.querySelectorAll('.radio.second');
            secondOptionList.forEach(e => {
                e.removeAttribute('checked')
                if(e.value == (firstOptionList.value * 2)){
                    //e.checked = true;
                    e.setAttribute('checked','');
                    var optionListItem2= document.querySelectorAll('input[type="radio"]:checked + span');
                    const selectedTwo = document.getElementsByClassName('selected');
                    optionListItem2.forEach(e => selectedTwo[1].innerHTML = e.innerHTML);
                    console.log(e)
                }
                
            })
        })
        
        
        
    })
    
}

.select-box {
    display: flex;
    flex-direction: column;
    width: 400px;
}

.select-box .options-container {
    background: cornflowerblue;
    color: white;
    max-height: 0;
    width: 100%;
    opacity: 0;
    transition: all .3s;
    border-radius: 8px;
    overflow: hidden;
    order: 1;
}

.selected {
    background: cornflowerblue;
    color: white;
    border-radius: 8px;
    margin-bottom: 8px;
    position: relative;
    order: 0;
}

.selected::after {
    content: '';
    background: url('./arrow-down.svg');
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    height: 100%;
    width: 18px;
    right: 10px;
    top: 40%;

    transform: all .3s;
}

.select-box .option {
    display: flex;
}

.select-box .option,
.selected {
    padding: 12px 24px;
    cursor: pointer;
}

.select-box span {
    cursor: pointer;
}

.select-box .option:hover {
    background: crimson;
}

.select-box .option .radio {
    display: none;
}

.select-box .options-container.active {
    max-height: 200px;
    opacity: 1;
    overflow-y: scroll;
}

.select-box .options-container.active + .selected::after {
    transform: rotateX(-180deg);
    top: -40%;
}

.select-box .options-container::-webkit-scrollbar {
    width: 8px;
    background: green;
    border-radius: 0 8px 8px 0;
}

.select-box .options-container::-webkit-scrollbar-thumb {
    background: red;
    border-radius: 0 8px 8px 0;
}

 <div class="subject-container">
                <div>
                  <input name="subject-name" onchange="subjectChange()" type="checkbox" id="checkbox1" checked />
                  <label for="checkbox1">USA</label>
                </div>
                <div>
                  <input name="subject-name" onchange="subjectChange()" type="checkbox" id="checkbox2" checked />
                  <label for="checkbox2">Canada</label>
                </div>
                <div>
                  <input name="subject-name" onchange="subjectChange()" type="checkbox" id="checkbox3" checked />
                  <label for="checkbox3">Germany</label>
                </div>
                <div>
                  <input name="subject-name" onchange="subjectChange()" type="checkbox" id="checkbox4" checked />
                  <label for="checkbox4">France </label>
                </div>
                <div>
                  <input name="subject-name" onchange="subjectChange()" type="checkbox" id="checkbox5" checked />
                  <label for="checkbox5">Italy</label>
                </div>
                <div>
                  <input name="subject-name" onchange="subjectChange()" type="checkbox" id="checkbox6" checked />
                  <label for="checkbox6">China</label>
                </div>
                <div>
                  <input name="subject-name" onchange="subjectChange()" type="checkbox" id="checkbox7" checked />
                  <label for="checkbox7">Japan</label>
                </div>
                <div>
                  <input name="subject-name" onchange="subjectChange()" type="checkbox" id="checkbox8" checked />
                  <label for="checkbox8">India</label>
                </div>
              </div>


            <form action="">
            <div class="select-box">
                <div class="options-container">
                    <label class="option">
                        <input type="radio" class="radio first" value="5" name="question">
                        <span>5</span>
                    </label>
                    <label class="option">
                        <input type="radio" class="radio first" value="10" name="question">
                        <span>10</span>
                    </label>
                    <label class="option">
                        <input type="radio" class="radio first" value="15" name="question" >
                        <span>15</span>
                    </label>
                    <label class="option">
                        <input type="radio" class="radio first" value="20" name="question">
                        <span>20</span>
                    </label>
                </div>
                <div class="selected">Number of question</div>
            </div>

            <div class="select-box">
                <div id="second-list" class="options-container">
                    <label class="option">
                        <input type="radio" class="radio second" value="10" name="minutes">
                        <span>10 minutes</span>
                    </label>
                    <label class="option">
                        <input type="radio" class="radio second" value="20" name="minutes" >
                        <span>20 minutes</span>
                    </label>
                    <label class="option">
                        <input type="radio" class="radio second" value="30" name="minutes">
                        <span>30 minutes</span>
                    </label>
                    <label class="option">
                        <input type="radio" class="radio second" value="40" name="minutes">
                        <span>40 minutes</span>
                    </label>
                </div>
                <div id="selected" class="selected">Select Exam Minute</div>
            </div>

            <button type="submit">Submit</button>
        </form>

?

Answer 1

In your javascript you have added eventListeners to all the select options when your page is loaded at first. But when you call the 'subjectChange' function, the innerHTMl is changed and new elements are added to your page but these new elements do not have eventListeners attached to them. You need to attach eventListeners to these elements as well. Like this :

         function subjectChange (){
            var subjectName = document.getElementsByName('subject-name');
            var questionSel = document.getElementsByClassName('options-container')[0];

            var checkBoxlength = 0;

            for(var i = 0; i < subjectName.length; i++) {
               if(subjectName[i].checked){
                 checkBoxlength++
               }
            }
            if(checkBoxlength <= 3) {
             questionSel.innerHTML = `
              <label class="option">
                <input type="radio" class="radio first" value="5" name="question" checked>
                <span>5</span>
              < /label>
            <label class="option">
        <input type="radio" class="radio first" value="10" name="question" checked>
        <span>10</span>
    </label>
    `;
} else if(checkBoxlength >= 4) {
    questionSel.innerHTML = `
    <label class="option">
        <input type="radio" class="radio first" value="5" name="question" checked>
        <span>5</span>
    </label>
    <label class="option">
        <input type="radio" class="radio first" value="10" name="question" checked>
        <span>10</span>
    </label>
    <label class="option">
        <input type="radio" class="radio first" value="15" name="question" checked>
        <span>15</span>
     </label>
    `;
   }
   start();   //this will add eventListeners to all the elements again
}

function start(){
 const selectBox = document.querySelectorAll('.select-box')

 for(var i = 0; i < selectBox.length; i++) {

  const selected = selectBox[i].querySelector('.selected');
  const optionsContainer = selectBox[i].querySelector('.options-container');

  const optionList = selectBox[i].querySelectorAll('.option');

   selected.addEventListener('click', function(){
      optionsContainer.classList.toggle("active");
   })
    
   optionList.forEach( o => {
     var optionListItem= o.querySelectorAll('input[type="radio"]:checked + span');
     optionListItem.forEach(e => selected.innerHTML = e.innerHTML)

      o.addEventListener('click', function(){
        var optionListItem= o.querySelectorAll('input[type="radio"]:checked + span');
        optionListItem.forEach(e => selected.innerHTML = e.innerHTML)
        optionsContainer.classList.remove('active')

        var firstOptionList = document.querySelector('input[type="radio"]:checked');
        var secondOptionList = document.querySelectorAll('.radio.second');
        secondOptionList.forEach(e => {
            e.removeAttribute('checked')
            if(e.value == (firstOptionList.value * 2)){
                //e.checked = true;
                e.setAttribute('checked','');
                var optionListItem2= document.querySelectorAll('input[type="radio"]:checked + span');
                const selectedTwo = document.getElementsByClassName('selected');
                optionListItem2.forEach(e => selectedTwo[1].innerHTML = e.innerHTML);
                console.log(e)
            }
            
        })
    })
    
    
    
  })

  }
}

start();