Используйте функцию JS вместо повторяющегося кода

Question

Я знаю, что это должно быть легко ... но я все еще изучаю JS:)

этот код работает нормально, но в настоящее время мне придется повторить это примерно 20 раз, просто изменив объект L50C и xp_50...

let L50C = document.getElementById('lvl50');
chrome.storage.sync.get('L50color', function(data) {L50C.setAttribute('value', data.L50color);
});
let L60C = document.getElementById('xp_60');
chrome.storage.sync.get('L60color', function(data) {L60C.setAttribute('value', data.L60color);
});

L40C.onchange = function(element) {
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
      chrome.tabs.insertCSS(
          tabs[0].id,
          {code: ".xp_40 {border: 1px solid " + element.target.value + " !important;} .xp_40 .icon {color: " + element.target.value + " !important;}"});
    });
  };
L50C.onchange = function(element) {
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
      chrome.tabs.insertCSS(
          tabs[0].id,
          {code: ".xp_50 {border: 1px solid " + element.target.value + " !important;} .xp_50 .icon {color: " + element.target.value + " !important;}"});
    });
  };

(я использую # 60 для проверки), так что ... если я изменю id = "xp_60" следующим образом ...

<div class="lvl_inp_cont">Level 60: <input id="xp_60" type="text" class="lvl_input" maxlength="7"></div>

могу ли я позвонитьфункция для повторения ... вот так:

L60C.onchange = swap(element);

function swap(element) {
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
      chrome.tabs.insertCSS(
          tabs[0].id,
          {code: "." + element.id + " {border: 1px solid " + element.target.value + " !important;} ." + element.id + " .icon {color: " + element.target.value + " !important;}"});
    });
  };

видите, чтобы вместо всего этого кода я мог просто установить для него один повторно используемый код?Я чувствую, что функция подкачки выглядит правильно (если нет, я не могу это исправить) - просто как мне "вызвать" или установить onchange для этой функции?

Спасибо !!

РЕДАКТИРОВАТЬ:я рядом?

const obj = {L40C, L50C, L60C, L70C};

for(let num = 40; num < 150; num+=10) {
    let obj['L' + num + 'C'] = document.getElementById('xp_' + num);
}

Answer 1

Похоже, что числа, например 40 в L40C.onchange, меняются каждый раз, поэтому я бы создал массив всех таких чисел, затем прошел бы по ним и назначил соответствующий chrome.tabs.query. Но вам понадобится объект или массив LC40, LC50 s, а не десятки отдельных имен переменных - например:

const obj = { L40C, L50C, ... };

Затем вы можете использовать переменные для доступа к свойству, и вместо ваших L40C.onchange и L50C.onchange вы можете сделать:

['40', '50'].forEach((num) => {
  const className = 'xp_' + num;
  obj['L' + num + 'C'].onchange = ({ target }) => {
    chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
      chrome.tabs.insertCSS(
        tabs[0].id,
        {code: "." + className + ' {border: 1px solid " + target.value + " !important;} .' + className + ' .icon {color: ' + target.value + ' !important;}'}
       );
    });
  };
});

Важно отметить, что параметром обработчика onchange является событие , а не элемент . event.target относится к элементу, который вызвал событие.

Answer 2

Так что вам просто нужно установить:

function swap(element) {
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
      chrome.tabs.insertCSS(
          tabs[0].id,
          {code: "." + element.id + " {border: 1px solid " + element.target.value + " !important;} ." + element.id + " .icon {color: " + element.target.value + " !important;}"});
    });
  };

L40C.onchange = swap;
L50C.onchange = swap;

Или вы можете перебрать массив объектов и установить его там:

var arr = [L40C, L50C];

for(let i = 0; i < arr.length; i++){
  arr[i].onchange = swap;
}