PLEASE HELP Merging two functions

JavaScript
1

Dear lovely fellows,
please help me with this code, I want to learn how to merge multiple functions and I tried a lot but with dead end. I’m a self learning person and online community are my teachers.
CODE ATTACHED BELOW HTML FIRST THEN JS


 <section id="ingredients" onmouseover="ingredientsHover()" onmousedown="ingredientsNormal()">
        <h2>ingredients  <i class="fa fa-coffee" aria-hidden="true"></i>
-----
<script>
function ingredientsHover() {
            document.getElementById('ingredients').firstElementChild.firstElementChild.style.fontSize = '300%';
        }

function ingredientsNormal() {
            document.getElementById('ingredients').firstElementChild.firstElementChild.style.fontSize = '100%';
        }
function preparationHover() {
            document.getElementById('preparation').firstElementChild.firstElementChild.style.fontSize = '300%';
        }
function preparationNormal() {
            document.getElementById('preparation').firstElementChild.firstElementChild.style.fontSize = '100%';
        }
</script>
3

Normally, changing style on hover is a job for CSS, not JS:

/* CSS */
section:hover i {
  font-size: 300%;
}
1 Like
5

There is no easy solution to what you want to achieve in JS.

function selectFirstGrandChild(element) {
  return element.firstElementChild && element.firstElementChild.firstElementChild;
}

function handleMouseEvent(e) {
  const element = selectFirstGrandChild(this);
  if (element) element.style.fontSize = (e.type === 'onmouseover' || e.type === 'onmouseup') ? '300%' : '100%';
}

function addMultipleEventListeners(target, events, callback) {
  events.trim().split(/\s+/).forEach((type) => target.addEventListener(type, callback));
}

const MOUSE_EVENTS = ['mouseover', 'mouseout', 'mousedown', 'mouseup'];

document.querySelectorAll('section').forEach((node) => addMultipleEventListeners(node, MOUSE_EVENTS.join(' '), handleMouseEvent));
1 Like