Как объединить несколько функций JS?

Question

[Максим js]

var bg = document.getElementById('bb');
          document.getElementById('gg').addEventListener("mouseover",
          function(){bg.style.width = 50 + "%", bg.style.height = 50 + "%";
          this.addEventListener("mouseout", function(){bg.style.width = "" , bg.style.height = "";});
});

var bh = document.getElementById('qq');
          document.getElementById('zz').addEventListener("mouseover", function(){bh.style.width = 50 + "%";this.addEventListener("mouseout", function(){bh.style.width = "";});
});

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

Comments

[Erl]

чисто ради интереса, это функция при наведении увеличивает элемент?
а почему нельзя использовать css?

[Максим js]

Erl, да увеличивает. css меняет свойство того же элемента на который наводишь, а у меня 100 элементов и нужно изменить свойство 23 и 24 элемента при наведении на 57.

[Erl]

Максим js, можно подробнее?
у вас какая то логика в изменении размера элемента?
допустим вы написали при наведении на 57 должны измениться 23 и 24, по какому принципу это работает?
css может дать вам желаемый результат

[Максим js]

Erl, например у меня есть 4 одинаковых блока которые занимают в сумме 100% всей площади. Для них по умолчанию задано занимать 40% своего размера, каждый занимает по 40%, но если при наведении на блок номер 5 изменить размер каждого до 50%, то они займут всю площадь 100% (можно сказать эффект открывания и закрывания ворот состоящих из 4 элементов. Общая конструкция состоит из 1000 блоков, все находятся в разных тегах , какие-то в "" , другие в "", а третьи в "" и так далее...
как? тогда с помощью css привязать одновременное изменение параметров блока 22 находящегося в "", параметров блока 234 находящегося в "" и еще каких нибудь блоков при наведении на кнопочку находящуюся в header?

Answer 1

[Максим js]

var bg = document.getElementById('bb');
         document.getElementById('gg').addEventListener("mouseover",
         function(){bg.style.width = 50 + "%", bg.style.height = 50 + "%";
          this.addEventListener("mouseout", function(){bg.style.width = "" , bg.style.height = "";});

});

var bh =  document.getElementById('qq');
          document.getElementById('gg').addEventListener("mouseover",
           function(){bh.style.width = 50 + "%", bh.style.height = 50 + "%";
           this.addEventListener("mouseout", function(){bh.style.width = "" , bh.style.height = "" ;});
});

var bj =  document.getElementById('ee');
          document.getElementById('gg').addEventListener("mouseover",
           function(){bj.style.width = 50 + "%", bj.style.height = 50 + "%";
           this.addEventListener("mouseout", function(){bj.style.width = "" , bj.style.height = "" ;});
});

var bk =  document.getElementById('ww');
          document.getElementById('gg').addEventListener("mouseover",
           function(){bk.style.width = 50 + "%", bk.style.height = 50 + "%";
           this.addEventListener("mouseout", function(){bk.style.width = "" , bk.style.height = "" ;});
});

добился желаемого эффекта созданием переменной на каждый изменяемый объект, с указанием id желаемой кнопки.

Answer 2

[Сергей Соколов]

Исходный код можно примерно так отрефакторить. Вынести в аргументы то, что меняется:

function addBehavior(idFrom, idTo, isChangingHeight) {
  const elFrom = document.getElementById(idFrom);
  const elTo = document.getElementById(idTo);
  
  const onOut = () => {
    elTo.style.width = "";
    isChangingHeight  &&  elTo.style.height = "";
//    elFrom.removeEventListener(onOut);
  }
  
  const onOver = () => {
    elTo.style.width = "50%";
    isChangingHeight  &&  elTo.style.height = "50%";
//     elFrom.removeEventListener(onOver);
  }
  
  elFrom.addEventListener("mouseover", onOver);  
  elFrom.addEventListener("mouseout", onOut);
}

addBehavior('gg', 'bg', true);
addBehavior('zz', 'qq');

Но в целом подход к решению задачи, наверняка, не самый лучший. Если бы вы более подробно описали проблему и привели разметку, тут предложили бы решение получше.