Как перезаписать значение переменной при использовании модулей?

Question

[Олег Михайлов]

Всем привет!
Попал в тупик!
Есть такая функция, которая лежит в отдельном модуле:

(function () {

  var getRandomColor = function (colors) {
    return colors[Math.floor(colors.length * Math.random())];
  };

  var rgbToHex = function (rgb) {
    rgb = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);

    return (rgb && rgb.length === 4) ? '#' +
      ('0' + parseInt(rgb[1], 10).toString(16)).slice(-2) +
      ('0' + parseInt(rgb[2], 10).toString(16)).slice(-2) +
      ('0' + parseInt(rgb[3], 10).toString(16)).slice(-2) : '';
  };

  window.colorize = function (el, colors, input, currentColor) {
    el.addEventListener('click', function () {
      var color = getRandomColor(colors);
      if (el.tagName.toLowerCase() === 'div') {
        el.style.backgroundColor = color;
        input.value = rgbToHex(el.style.backgroundColor);
      } else {
        el.style.fill = color;
        input.value = color;
      }
      currentColor = color;
    });
  };
})();

Мне нужно перезаписать переменные в другом модуле, в котором я её вызываю. Вот в этом:

(function () {

  var wizardCoat = document.querySelector('.wizard-coat');

  var wizardEye = document.querySelector('.wizard-eyes');

  var coatColor;

  var eyesColor;

  window.colorize(wizardCoat, window.wizardData.coatColorsList, document.querySelector('input[name = coat-color]'), coatColor);
  window.colorize(wizardEye, window.wizardData.eyesColorslist, document.querySelector('input[name = eyes-color]'), eyesColor);
})();

Как вы поняли, я попытался наивно добавить четвертый аргумент к функции colorize, но это не помогает. Как достать цвет и перезаписать переменные coatColor, eyesColor и присвоить им текущий цвет?

Comments

[Михаил]

колбэки?

[Олег Михайлов]

Да, попытался это изобразить)

[Roman Prokhorov]

window.colorize = function (el, colors, input, сb) {
    el.addEventListener('click', function () {
      var color = getRandomColor(colors);
      if (el.tagName.toLowerCase() === 'div') {
        el.style.backgroundColor = color;
        input.value = rgbToHex(el.style.backgroundColor);
      } else {
        el.style.fill = color;
        input.value = color;
      }
      сb(color);
    });
  };
var coatColor;
window.colorize(wizardCoat, window.wizardData.coatColorsList, document.querySelector('input[name = coat-color]'), el => {
coatColor = el
});

[Олег Михайлов]

Roman Prokhorov, спасибо, что подсказали с cb)
сделал так:

// модуль colorize.js
(function () {

  // ...
  
  window.colorize = function (el, colors, input, cb) {
    el.addEventListener('click', function () {
      var color = getRandomColor(colors);
      if (el.tagName.toLowerCase() === 'div') {
        el.style.backgroundColor = color;
        input.value = rgbToHex(el.style.backgroundColor);
      } else {
        el.style.fill = color;
        input.value = color;
      }
      cb(color);
    });
  };
})();

// Модуль change.js

(function () {

// ...

  var coatColor;  // вот это надо было изменять и сохранять

  var eyesColor; // вот это надо было изменять и сохранять

  var saveCoatolor = function (color) {
    coatColor = color;
  };

  var saveEyesColor = function (color) {
    eyesColor = color;
};

  setTimeout(function() {
    console.log(coatColor);
  }, 10000);  // Проверил через setTimeout, переменная перезаписана

  window.colorize(wizardCoat, window.wizardData.coatColorsList, document.querySelector('input[name = coat-color]'), saveCoatolor);
  window.colorize(wizardEye, window.wizardData.eyesColorslist, document.querySelector('input[name = eyes-color]'), saveEyesColor);
  window.colorize(wizardBall, window.wizardData.wiazardBallColorList, document.querySelector('input[name = fireball-color]'));

})();

Answer 1

[Karpion]

Я не понял, какой цвет Вы хотите достать. Ну, дописали Вы четвертый аргумент к функции colorize - а что дальше-то?

Навскидку мне кажется, что Вы не знаете разницу между передачей аргументов по ссылке (тогда при изменении внутри функции - аргумент изменится; тут возможны разнообразные странности) и по значению (тогда аргумент на выходе из функции измениться не может).