CODEWITHSUNDEEP
javascripthtmljqueryloopsvariables
Mikkel Nurfalah
Mikkel Nurfalah

Reputation: 57

Javascript create looping variables

my javascript variables

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

Upvotes: 2

Views: 59

Answers (4)

Mamun
Mamun

Reputation: 68933

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

Upvotes: 1

Utkarsh Tyagi
Utkarsh Tyagi

Reputation: 1489

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

Upvotes: 1

poorly-written-code
poorly-written-code

Reputation: 1073

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

Upvotes: 1

CertainPerformance
CertainPerformance

Reputation: 371198

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

Upvotes: 1

Related Questions