Iterate functions via .addEventListener to div does not work

Question

i tried to add functions with Eventlistener to a row of divs with a for-loop. But the functions are not working. Nothing is happening in the divs. All divs are defined in the PHP File.

JS:

function chartouterdivscalemax(i) {
    
    var a = document.getElementsByClassName('chartouterdiv');
    a[i].style.transform = "scale(1.25)";
    
    var b = document.getElementsByClassName('logocontainer');
    b[i].style.transform = "scale(1.25)";
    b[i].style.transform = "translate(0px, 10px)";
    
    var c = document.getElementsByClassName('highdiv');
    c[i].style.height = "70px";
    
    var d = document.getElementsByClassName('lowdiv');
    d[i].style.height = "35px";

    
}

function chartouterdivscalemin(i) {
    
    var a = document.getElementsByClassName('chartouterdiv');
    a[i].style.transform = "scale(1)";
    
    var b = document.getElementsByClassName('logocontainer');
    b[i].style.transform = "scale(1)";
    
    var c = document.getElementsByClassName('highdiv');
    c[i].style.height = "55px";
    
    var d = document.getElementsByClassName('lowdiv');
    d[i].style.height = "50px";
       
}

function iteratescalefunction() {
    
    var elements = document.getElementsByClassName('chartouterdiv');
    
    for (var i = 0; i <= elements.length; i++ ){
        
        elements[i].addEventListener("mouseover", function(i){chartouterdivscalemax(i)}, false);
        elements[i].addEventListener("mouseout", function(i){chartouterdivscalemin(i)}, false);
        console.log(i);
    }
}

CSS:

.chartouterdiv{
    
    height:115px;
    width:215px;
    background-color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.5s;
    transform: scale(1);
   
}


.chartinnerdiv{
    
    height: 105px;
    width: 205px;
    background-color: white;
}

.highdiv{
    
    height: 55px;
    width: 205px;
    background-color: antiquewhite;
    transition: 0.5s;

}

.lowdiv{
    
    height: 50px;
    width: 205p;
    background-color: aqua;
    display: flex;
    align-items:center;
    justify-content: center;
    transition: 0.5s;
}

.logocontainer{
    
    height: 50px;
    width: 50px;
    background-color: aquamarine;
    transition: 0.5s;
    
    
}

`function(i){chartouterdivscalemax(i)}` that is not doing what you think it is doing. https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example — epascarello, Jul 21 '20 at 15:55
" All divs are defined in the PHP File", of course you can show us the rendered HTML, or simply make a live version — Saadi Toumi Fouad, Jul 21 '20 at 15:55
after reading your js code, it should be a closure problem, `for (var i = 0; i <= elements.length; i++ ) {` should be `for (let i = 0; i <= elements.length; i++ ) {` to avoid closures — Saadi Toumi Fouad, Jul 21 '20 at 15:57
Also it would be more appropriate to use **CSS** `:hover` for your scaling instead of JavaScript code — Saadi Toumi Fouad, Jul 21 '20 at 16:00
This is a classic mistake we often make. Closure is in play here. Those event handlers would fire, but will show only the final value of i. — jossie, Jul 21 '20 at 16:55

Saadi Toumi Fouad · Accepted Answer · 2020-07-21T16:49:42.327

Well you need to use the let keyword instead of the var keyword to declare the variable i inside your loop to avoid closures, also in your event listener .addEventListener("mouseover", function(i) { the anonymous function should not use the variable i in this case it is the event object and not what you may expect, so it should be only .addEventListener("mouseover", function() { and let the i be used from the loop, here I made this simple example to demonstrate that, I'm using my own HTML and CSS, and some of your JS, since it's all what matters here

var circles = document.getElementsByClassName('circle');
function chartOuterDivScaleMax(i) {
  circles[i].style.transform = "scale(1.25)";
}

function chartOuterDivScaleMin(i) {
  circles[i].style.transform = "scale(1)";   
}

function iterateScaleFunction() {
  for(let i = 0; i < circles.length; i++ ) {
    circles[i].addEventListener("mouseover", function() {chartOuterDivScaleMax(i)}, false);
    circles[i].addEventListener("mouseout", function() {chartOuterDivScaleMin(i)}, false);
  }
}

iterateScaleFunction();

* {
  box-sizing: border-box;
}
#circles-container {
  display: flex;
}
.circle-container {
  width: 52px;
  height: 52px;
  padding: 5px;
  border-radius: 50%;
  border: 1px solid red;
}
.circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: orange;
}

<div id="circles-container">
  <div class="circle-container">
    <div class="circle"></div>
  </div>
  <div class="circle-container">
    <div class="circle"></div>
  </div>
  <div class="circle-container">
    <div class="circle"></div>
  </div>
  <div class="circle-container">
    <div class="circle"></div>
  </div>
  <div class="circle-container">
    <div class="circle"></div>
  </div>
</div>

Or you can do the same in CSS in a simple way

* {
  box-sizing: border-box;
}
#circles-container {
  display: flex;
}
.circle-container {
  width: 52px;
  height: 52px;
  padding: 5px;
  border-radius: 50%;
  border: 1px solid red;
}
.circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: orange;
}
.circle:hover {
  transform: scale(1.25);
}

<div id="circles-container">
  <div class="circle-container">
    <div class="circle"></div>
  </div>
  <div class="circle-container">
    <div class="circle"></div>
  </div>
  <div class="circle-container">
    <div class="circle"></div>
  </div>
  <div class="circle-container">
    <div class="circle"></div>
  </div>
  <div class="circle-container">
    <div class="circle"></div>
  </div>
</div>

Iterate functions via .addEventListener to div does not work

1 Answers1