时间戳

首页 > 解决方案 > 为什么在有条件的 innerHTML 之后我的功能不起作用？

javascript - 为什么在有条件的 innerHTML 之后我的功能不起作用？

问题描述

我有几个代表主题的复选框。我有两个自定义（无线电）选择。由于 checkbox:checked 长度，我想更改我的第一个选择的 innerHTML。如果选定的复选框长度小于 3，我想呈现不同的选择选项，否则呈现另一个选择选项。当页面加载它工作正常但重新检查我的复选框后，我无法从我的第一个复选框中选择任何选项。有人可以看看并帮助我吗

codepen链接也在这里

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>

?

标签： javascripthtmlcssdom

解决方案

在您的 javascript 中，您在首次加载页面时已将 eventListeners 添加到所有选择选项中。但是当您调用“subjectChange”函数时，innerHTMl 会发生变化，并且新元素会添加到您的页面中，但这些新元素没有附加事件监听器。您还需要将 eventListeners 附加到这些元素。像这样 ：

         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();

推荐阅读