Javascript create looping variables

Question

var select1 = document.getElementById('status-kehadiran1');
select1.onchange = function () {
    select1.classList.remove("hijau");
    select1.classList.remove("merah");
    select1.classList.add(this.options[this.selectedIndex].className);
}
var select2 = document.getElementById('status-kehadiran2');
select2.onchange = function () {
    select2.classList.remove("hijau");
    select2.classList.remove("merah");
    select2.classList.add(this.options[this.selectedIndex].className);
}
var select3 = document.getElementById('status-kehadiran3');
select3.onchange = function () {
    select3.classList.remove("hijau");
    select3.classList.remove("merah");
    select3.classList.add(this.options[this.selectedIndex].className);
}
var select4 = document.getElementById('status-kehadiran4');
select4.onchange = function () {
    select4.classList.remove("hijau");
    select4.classList.remove("merah");
    select4.classList.add(this.options[this.selectedIndex].className);
}
var select5 = document.getElementById('status-kehadiran5');
select5.onchange = function () {
    select5.classList.remove("hijau");
    select5.classList.remove("merah");
    select5.classList.add(this.options[this.selectedIndex].className);
}
var select6 = document.getElementById('status-kehadiran6');
select6.onchange = function () {
    select6.classList.remove("hijau");
    select6.classList.remove("merah");
    select6.classList.add(this.options[this.selectedIndex].className);
}
var select7 = document.getElementById('status-kehadiran7');
select7.onchange = function () {
    select7.classList.remove("hijau");
    select7.classList.remove("merah");
    select7.classList.add(this.options[this.selectedIndex].className);
}
var select8 = document.getElementById('status-kehadiran8');
select8.onchange = function () {
    select8.classList.remove("hijau");
    select8.classList.remove("merah");
    select8.classList.add(this.options[this.selectedIndex].className);
}
var select9 = document.getElementById('status-kehadiran9');
select9.onchange = function () {
    select9.classList.remove("hijau");
    select9.classList.remove("merah");
    select9.classList.add(this.options[this.selectedIndex].className);
}
var select10 = document.getElementById('status-kehadiran10');
select10.onchange = function () {
    select10.classList.remove("hijau");
    select10.classList.remove("merah");
    select10.classList.add(this.options[this.selectedIndex].className);
}

is there a way to create a looping for those variable to make it more simple?

my html select elements

because i have 10 select element with different id

view

the purpose of each variable is to change the text color of each select when there is a change of selected option

i hope you can understand my explanation

Use [event delegation](//developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_delegation) instead of assigning multiple events — it’s more maintainable, and applies to dynamically added elements. E.g., use an [event argument](//developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#The_event_listener_callback)’s [`target`](//developer.mozilla.org/en-US/docs/Web/API/Event/target). See [the tag info](/tags/event-delegation/info) and [What is DOM Event delegation?](/q/1687296/4642212). — Sebastian Simon, May 22 '21 at 03:12

score 1 · Answer 1 · answered May 22 '21 at 03:11

Don't use IDs, use a common selector instead for all of those selects - such as [name^="pertemuan"] (name attribute starts with pertemuan):

for (const select of document.querySelectorAll('[name^="pertemuan"]')) {
    select.addEventListener('change', () => {
        select.classList.remove("hijau", "merah");
        select.classList.add(select.options[select.selectedIndex].className);
    });
}

Mamun · Answer 2 · 2021-05-22T03:48:08.437

You can first select all the elements with ids using Document.querySelectorAll() and then loop through them and attach the event (change) one by one using EventTarget.addEventListener().

You can try the following way:

//you can select by exact id
//var sel = document.querySelectorAll('#status-kehadiran1, #status-kehadiran2, #status-kehadiran3, #status-kehadiran4, #status-kehadiran5, #status-kehadiran6, #status-kehadiran7, #status-kehadiran8, #status-kehadiran9, #status-kehadiran10');

//you can select by id startsWith selector by matching the common part of each id 
var sel = document.querySelectorAll('[id^=status-kehadiran]');
sel.forEach(function(el){
  el.addEventListener('change', function(){
    el.classList.remove("hijau", "merah"); //you can remove multiple class separating them with comma
    el.classList.add(el.options[el.selectedIndex].className);
  });
});

score 1 · Answer 3 · answered May 22 '21 at 03:39

You could drop the ids and move status-kehadiran to the selects class list. The you can select all of them with .querySelectorAll() and loop over them with .forEach()

document.querySelectorAll('.status-kehadiran')
  .forEach(function(select) {
    select.addEventListener('change', function() {
      this.classList.remove('hijau', 'merah');
      this.classList.add(this.selectedOptions[0].className);
    });
  });

score 1 · Answer 4 · answered May 22 '21 at 03:46

As mentioned by others you can use query selector with name and ids, but you can also assign them a common class and use -

document.getElementsByClassName('.name of class')
.forEach(function(select) {
    select.addEventListener('change', function() {
        this.classList.remove('hijau', 'merah');
        this.classList.add(this.selectedOptions[0].className);
    });
});

Javascript create looping variables

4 Answers4