Change others element on mouseover in some element

Question

I have this situation in this codepen: https://codepen.io/toniup/pen/KKZRLJm

HTML

<div class="container_text">

<a id="zona_1"  href="#">ZONA 1</a>

<a id="zona_2" href="#">ZONA 2</a>

<a id="zona_3" href="#">ZONA 3</a>

<a id="zona_4" href="#">ZONA 4</a>

<a id="zona_5" href="#">ZONA 5</a>

</div><!-- /container_text-->

<div class="container_img">

<div id="path_zona_1" 
onmouseover="cambio_colore(this);"
onmouseout="reset_color('red')" 
href="#">
something 1
</div>

 <div id="path_zona_2" 
onmouseover="cambio_colore(this);"
onmouseout="reset_color('red')" 
href="#">
something 2
</div>

<div id="path_zona_3" 
onmouseover="cambio_colore(this);"
onmouseout="reset_color('red')" 
href="#">
something 3
</div>

<div id="path_zona_4" 
onmouseover="cambio_colore(this);"
onmouseout="reset_color('red')" 
href="#">
 something 4
</div>

<div id="path_zona_5" 
 onmouseover="cambio_colore(this);"
 onmouseout="reset_color('red')" 
  href="#">
  something 5
  </div>

JAVASCRIPT

function cambio_colore(obj) {
var id_corrente = (obj.id);

 // zona 1

if ( id_corrente == 'path_zona_1') {
 document.getElementById('zona_1').style.cssText = "color:#000; transition:0.5s;";

 document.getElementById('zona_2').style.cssText = "color:#d3d3d3; transition:0.5s;";

 document.getElementById('zona_3').style.cssText = "color:#d3d3d3; transition:0.5s;";

 document.getElementById('zona_4').style.cssText = "color:#d3d3d3; transition:0.5s;";

 document.getElementById('zona_5').style.cssText = "color:#d3d3d3; transition:0.5s;";

  }

 // zona 2

 if ( id_corrente == 'path_zona_2') {
  document.getElementById('zona_2').style.cssText = "color:#000; transition:0.5s;";

 document.getElementById('zona_1').style.cssText = "color:#d3d3d3; transition:0.5s;";

  document.getElementById('zona_3').style.cssText = "color:#d3d3d3; transition:0.5s;";

        document.getElementById('zona_4').style.cssText = "color:#d3d3d3; transition:0.5s;";

      document.getElementById('zona_5').style.cssText = "color:#d3d3d3; transition:0.5s;";
      }


// zona 3

 if ( id_corrente == 'path_zona_3') {
 
 document.getElementById('zona_3').style.cssText = "color:#000; transition:0.5s;";

 document.getElementById('zona_1').style.cssText = "color:#d3d3d3; transition:0.5s;";

 document.getElementById('zona_2').style.cssText = "color:#d3d3d3; transition:0.5s;";

 document.getElementById('zona_4').style.cssText = "color:#d3d3d3; transition:0.5s;";

document.getElementById('zona_5').style.cssText = "color:#d3d3d3; transition:0.5s;";

}

// zona 4

 if ( id_corrente == 'path_zona_4') {
 document.getElementById('zona_4').style.cssText = "color:#000; transition:0.5s;";

 document.getElementById('zona_1').style.cssText = "color:#d3d3d3; transition:0.5s;";

 document.getElementById('zona_2').style.cssText = "color:#d3d3d3; transition:0.5s;";

  document.getElementById('zona_3').style.cssText = "color:#d3d3d3; transition:0.5s;";

 document.getElementById('zona_5').style.cssText = "color:#d3d3d3; transition:0.5s;";

 }


 // zona 5

if ( id_corrente == 'path_zona_5') {
     document.getElementById('zona_5').style.cssText = "color:#000; transition:0.5s;";

     document.getElementById('zona_1').style.cssText = "color:#d3d3d3; transition:0.5s;";

     document.getElementById('zona_2').style.cssText = "color:#d3d3d3; transition:0.5s;";

     document.getElementById('zona_3').style.cssText = "color:#d3d3d3; transition:0.5s;";

     document.getElementById('zona_4').style.cssText = "color:#d3d3d3; transition:0.5s;";
}

  }

function reset_color(color) {
            document.getElementById('zona_1').style.color = color;
            document.getElementById('zona_2').style.color = color;
            document.getElementById('zona_3').style.color = color;
            document.getElementById('zona_4').style.color = color;
            document.getElementById('zona_5').style.color = color;
        }

Works, but is the right approch?

The javascript code is so long, can I compact the code with, for example, for loop instead of all if/else statements?

I would like the inverse, so: when mouseover in something -number- -> change corresponding ZONA -number- (as now) when mouseover in ZONA -number- -> change the corresponding something -number-

Thanks

Answer 1

The first section of this solution offers an answer to the question:

for example, for loop instead of all if/else statements?

Code Sample

const zones = [...Array(5).keys()].map(i => `zona_${i+1}`);

function cambio_colore(obj) {
  var id_corrente = (obj.id);
  zones.forEach(z => {
    document.getElementById(z).style.cssText = (
      id_corrente === `path_${z}`
      ? "color:#000; transition:0.5s;"
      : "color:#d3d3d3; transition:0.5s;"
    );
  });
};

function reset_color(color) {
  zones.forEach(z => {
    document.getElementById(z).style.color = color;
  });
};

Explanation

• The zones are declared as a const at the top
• The functions cambio_colore and reset_color are modified to use .forEach to iterate over zones.

This next part addresses (in addition to the above), the below:

I would like the inverse

Code Snippet

// the zona_ 1 through 5 are set into "zones" array
const zones = [...Array(5).keys()].map(i => `zona_${i+1}`);

// modified the function by using ".foreach"
function cambio_colore(obj) {
  var id_corrente = (obj.id);
  zones.forEach(z => {
    document.getElementById(z).style.cssText = (
      id_corrente === `path_${z}`
      ? "color:#000; transition:0.5s;"
      : "color:#d3d3d3; transition:0.5s;"
    );
  });
}

// used simple "foreach" to assign the color
function reset_color(color) {
  zones.forEach(z => {
    document.getElementById(z).style.color = color;
  });
}

// this is to achieve the "inverse"
const cambio_colore2 = ({id}) => {
  zones.forEach(z => {
    document.getElementById(`path_${z}`).style.cssText = (
      id === z
      ? "color:#000; transition:0.5s;"
      : "color:#d3d3d3; transition:0.5s;"
    );
  });
};

// "onmouseout" for the "inverse"
function reset_color2(color) {
  zones.forEach(z => {
    document.getElementById(`path_${z}`).style.color = color;
  });
};

.container_text {margin-bottom:30px;}

#zona_1, 
#zona_2,
#zona_3,
#zona_4,
#zona_5
{padding:10px;}

.container_img {
  display:flex;
}

#path_zona_1,
#path_zona_2,
#path_zona_3,
#path_zona_4,
#path_zona_5
{padding:20px;}

<div class="container_text">

<a id="zona_1"
   onmouseover="cambio_colore2(this);"
   onmouseout="reset_color2('red')"
   href="#">ZONA 1</a>

<a id="zona_2" 
   onmouseover="cambio_colore2(this);"
   onmouseout="reset_color2('red')"
   href="#">ZONA 2</a>

<a id="zona_3" 
   onmouseover="cambio_colore2(this);"
   onmouseout="reset_color2('red')"
   href="#">ZONA 3</a>

<a id="zona_4" 
   onmouseover="cambio_colore2(this);"
   onmouseout="reset_color2('red')"
   href="#">ZONA 4</a>

<a id="zona_5" 
   onmouseover="cambio_colore2(this);"
   onmouseout="reset_color2('red')"
   href="#">ZONA 5</a>

</div><!-- /container_text-->

<div class="container_img">

<div id="path_zona_1" 
onmouseover="cambio_colore(this);"
onmouseout="reset_color('red')" 
href="#">
something 1
</div>

<div id="path_zona_2" 
onmouseover="cambio_colore(this);"
onmouseout="reset_color('red')" 
href="#">
something 2
</div>

<div id="path_zona_3" 
onmouseover="cambio_colore(this);"
onmouseout="reset_color('red')" 
href="#">
something 3
</div>

<div id="path_zona_4" 
onmouseover="cambio_colore(this);"
onmouseout="reset_color('red')" 
href="#">
something 4
</div>

<div id="path_zona_5" 
onmouseover="cambio_colore(this);"
onmouseout="reset_color('red')" 
href="#">
something 5
</div>

</div><!-- /container_img-->

Explanation

• Used similar logic as earlier
• "onmouseover" and "onmouseout", similar to existing elements, added on HTML

Answer 2

it better to not write javascript code inside the element, use element.addEventListener('mouseover',...) and element.addEventListener('mouseout',...)

function qsa(s) {
  return document.querySelectorAll(s);
}

var colorA = "color:#000; transition:0.5s;";
var colorB = "color:#d3d3d3; transition:0.5s;";

qsa('.container_img div, .container_text a').forEach(function(i) {
  i.addEventListener('mouseover', function(e) {
    if (i.id.includes("path_")) {
      qsa('.container_text a').forEach(function(a) {
        a.style = i.id.replace("path_", "") == a.id ? colorA : colorB;
      })
    } else {
      qsa('.container_img div').forEach(function(a) {
        a.style = "path_" + i.id == a.id ? colorA : colorB;
      })
    }
  })
  i.addEventListener('mouseout', function(e) {
    qsa('.container_text a').forEach(function(item) {
      item.style.color = "red";
    })
    qsa('.container_img div').forEach(function(item) {
      item.style.color = "black";
    })
  })
})

.container_text{margin-bottom:30px}
#zona_1,#zona_2,#zona_3,#zona_4,#zona_5{padding:10px}
.container_img{display:flex}
#path_zona_1,#path_zona_2,#path_zona_3,#path_zona_4,#path_zona_5{padding:20px}

<div class="container_text">
  <a id="zona_1" href="#">ZONA 1</a>
  <a id="zona_2" href="#">ZONA 2</a>
  <a id="zona_3" href="#">ZONA 3</a>
  <a id="zona_4" href="#">ZONA 4</a>
  <a id="zona_5" href="#">ZONA 5</a>
</div>

<div class="container_img">
  <div id="path_zona_1">something 1</div>
  <div id="path_zona_2">something 2</div>
  <div id="path_zona_3">something 3</div>
  <div id="path_zona_4">something 4</div>
  <div id="path_zona_5">something 5</div>

</div>