JavaScript how to loop key value pairs inside a function

Question

I'm new to JavaScript.

I have 2 key and value pairs they are ids:

myselect->myoption
myselect2->myoption2

Code:

  function checkboxStatusChanges() {
    var multiselect = document.getElementById("myselect");
    var multiselectOption = multiselect.getElementsByTagName('option')[0];
  
    var values = [];
    var checkboxes = document.getElementById("myoption");
    var checkedCheckboxes = checkboxes.querySelectorAll('input[type=checkbox]:checked');
  
    for (const item of checkedCheckboxes) {
      var checkboxValue = item.getAttribute('value');
      values.push(checkboxValue);
    }
  
    var dropdownValue = "Nothing is selected";
    if (values.length > 0) {
      dropdownValue = values.join(', ');
    }
  
    multiselectOption.innerText = dropdownValue;
  }

The code already used 1 of the pair values myselect->myoption document.getElementById("myselect") ,my question is ,how to code a loop inside the code ,so that both of the 2 pair values can be used in the code ?

`for (const [key, value] of [['myselect', 'myoption'], ['myselect2', 'myoption2']]) { console.log(key, value); }` is one way. — Wyck, Apr 12 '23 at 01:24
@Wyck Thank you very much for you reply ,can you post this as an detail answer ?Thanks! — William, Apr 12 '23 at 01:27
select elements have direct properties that you should use rather than this kind of non conforming js code — Mister Jojo, Apr 12 '23 at 01:45

score 1 · Accepted Answer · answered Apr 12 '23 at 01:26

You can use an array of objects to solve this. Define your pair value inside object.selectId and object.optionId and do forEach to apply the function for those objects like this:

function checkboxStatusChanges() {
    let targetIds = [{
            "selectId": "myselect",
            "optionId": "myoption"
        },
        {
            "selectId": "myselect2",
            "optionId": "myoption2"
        }
    ];
    targetIds.forEach(function(targetId) {
        var multiselect = document.getElementById(targetId.selectId);
        var multiselectOption = multiselect.getElementsByTagName('option')[0];

        var values = [];
        var checkboxes = document.getElementById(targetId.optionId);
        var checkedCheckboxes = checkboxes.querySelectorAll('input[type=checkbox]:checked');

        for (const item of checkedCheckboxes) {
            var checkboxValue = item.getAttribute('value');
            values.push(checkboxValue);
        }

        var dropdownValue = "Nothing is selected";
        if (values.length > 0) {
            dropdownValue = values.join(', ');
        }

        multiselectOption.innerText = dropdownValue;
    });
}

Thank you so much sir ,can you also help with this one,this is the last one of today https://stackoverflow.com/questions/75991389/javascript-for-loop-inside-a-function-not-work — William, Apr 12 '23 at 02:15
Hi friend can you help me with this one :https://stackoverflow.com/questions/76009630/javascript-to-to-change-input-type-date-format-and-value?noredirect=1#comment134057558_76009630 — William, Apr 13 '23 at 21:09

score 0 · Answer 2 · answered Apr 12 '23 at 02:17

It is my understanding that your function is absolutely fine as is, except that you want to parameterize "myselect" and "myoption" as key and value. So, you can do that at the function level. Parameterization is a fundamental feature of functions in JavaScript and, easy peasy:

 function checkboxStatusChanges(key, value) {
    var multiselect = document.getElementById(key);
    var multiselectOption = multiselect.getElementsByTagName('option')[0];
  
    var values = [];
    var checkboxes = document.getElementById(value);
    var checkedCheckboxes = checkboxes.querySelectorAll('input[type=checkbox]:checked');
  
    for (const item of checkedCheckboxes) {
      var checkboxValue = item.getAttribute('value');
      values.push(checkboxValue);
    }
  
    var dropdownValue = "Nothing is selected";
    if (values.length > 0) {
      dropdownValue = values.join(', ');
    }
  
    multiselectOption.innerText = dropdownValue;
  }

Now you just need to call this function twice, once with each key, value pair.

In the simplest form you can now do:

checkboxStatusChanges('myselect', 'myoption');
checkboxStatusChanges('myselect2', 'myoption2');

If you need a single function that does both those things because it's an event handler or something, then that's also very easy to solve:

function allChanges() {
  checkboxStatusChanges('myselect', 'myoption');
  checkboxStatusChanges('myselect2', 'myoption2');
}

And now that we've gotten all that out of the way, if you really insist on doing so, you could use a loop:

const pairs = [
  ['myselect', 'myoption'],
  ['myselect2', 'myoption2']
];

for (const [key, value] of pairs) {
  checkboxStatusChanges(key, value);
}

Hi sir thank you so much for your reply ,can you help with this question too :https://stackoverflow.com/questions/75991389/javascript-for-loop-inside-a-function-not-work?noredirect=1#comment134027397_75991389 — William, Apr 12 '23 at 02:21

JavaScript how to loop key value pairs inside a function

2 Answers2