0

I'm trying to make certain options show in a drop menu according to what radio button the user has clicked. The problem is I'm only able to change the class name to the even indexes (0,2,4,...) of the HTMLCollection. The result is that only the even indexes show in the drop menu. Of course this also happens when trying to hide the other options but I'll only share here the show loop because I guess the problem is the same.

HTML:

<select class="custom-select mr-sm-2" id="inlineFormCustomSelectType" disabled>
 <option selected>Type</option>
 <option class="tea-options-hidden" value="tea1">tea1</option>
 <option class="tea-options-hidden" value="tea2">tea2</option>
 <option class="tea-options-hidden" value="tea3">tea3</option>
 <option class="tea-options-hidden" value="tea4">tea4</option>
 <option class="tea-options-hidden" value="tea5">tea5</option>
</select>

JavaScript:

var teaRadio = document.getElementById("tea-radio");
teaRadio.onclick = function() {
    document.getElementById("inlineFormCustomSelectType").removeAttribute("disabled");
    var elements = document.getElementsByClassName('tea-options-hidden');
    console.log(elements.length);
    for (var i = 0; i < elements.length; i++) {
        console.log(i)
        console.log(elements[i]);
        elements[i].className = 'tea-options-shown';
        console.log(elements[i]);
    }
}

CSS:

.tea-options-hidden {
display: none;
}

.tea-options-shown {
}

I tried to debug this with console logs and this is what I got (same consoloe.log() as in the code snippet:

enter image description here

What's going on here? It seems to me like there is a problem with actions happening to fast.

Thanks for your answers.

Community
  • 1
  • 1
Yaniv K.
  • 237
  • 4
  • 12
  • In a way, yes. `getElementsByClassName` returns a live collection, its contents changes automatically when you manipulate the class names. – Teemu Oct 12 '18 at 12:07
  • ...so either loop from the end to the beginning, or use `querySelectorAll` instead so you get a snapshot, not a live collection. – T.J. Crowder Oct 12 '18 at 12:07

0 Answers0