JavaScript loop doesn't work

Question

I am a beginner and I am trying to override that the :hover pseudo-class in CSS doesn't let me trigger an event if the element that I am hovering over is below some other element.

If I hover over the div, the css transition kicks in, however, if I go over the text that is visually above the div, nothing happens.

I have four such elements, so I was trying to use getElementsByClassName to create the array to be iterated in JavaScript, but the console gives me always the same error of

 index.html:77 Uncaught TypeError: Cannot read property 'style' of 
 undefined
 at stretchback (index.html:77)
 at HTMLParagraphElement.onmouseout (index.html:24)
 stretchback @ index.html:77
 onmouseout @ index.html:24
<script>
 var boxes = document.getElementsByClassName('skill-box');
 function stretch() {
 for (var i=0; i < boxes.length; i++)
 boxes[i].style.opacity = "0.3";
 boxes[i].style.transform = "scaleY(10)";
 boxes[i].style.borderRadius = "0px";
 boxes[i].style.transition = "opacity 2s, transform 2s, border-radius 1s ease-in-out";
 }
 function stretchback() {
 for (var i=0; i < boxes.length; i++)
 boxes[i].style.opacity = "1";
 boxes[i].style.transform = "scaleY(1)";
 boxes[i].style.borderRadius = "10px";
 boxes[i].style.transition = "opacity 2s, transform 2s, border-radius 1s ease-in-out"; }
</script>

What am I doing wrong?

• Akhil: can you console.log(box) ?
• epascarello: FYI: i < document.getElementsByClassName('skill-boxes').length; The performance of that is bad.
• David: At a quick glance I can see a few things wrong here actually. For starters, you're re-declaring the same variables and overwriting their values, so your variables might not have what you think they have. You're also iterating over a dynamically-fetched set of elements instead of over the array you're using (box, which should really be plural by the way). So if anything changes the state of the DOM then those lengths might not always be equal.
• Krisztian Toth: @David I corrected the code and now I am only declaring the variable once as a global one. It gives the same error.

Answer 1

This one is quite simple... you missed an opening curly-brace on your for loop:

 for (var i=0; i < box.length; i++) { // <-- for example, here

I have used box.length as you already have the array of elements too.

Your original code:

function stretch() {
for (var i=0; i < document.getElementsByClassName('skill-boxes').length; i++) // <-- OUCH
box[i].style.opacity = "0.3";
box[i].style.transform = "scaleY(10)";

• Piotr Pasieka: just for a record - opening and closing braces are missing
• Fenton: Thanks @PiotrPasieka - and on both loops! Always use those curly braces :) stevefenton.co.uk/2010/05/always-use-those-curly-braces
• Bergi: You might also want to vote to close as a typographical mistake.

Answer 2

Seems like a scoping issue. Try moving your box and skills variable declarations inside the stretch and stretchback functions.

• sm1215: Fair enough, second look through, seems like your for loops are missing their curly braces. Adding them in removes the error: codepen.io/sm1215/pen/eGbdYR

Answer 3

How about using addEventListener('mouseenter') instead of doing hover css.

Answer 4

You may want to avoid variables from overwriting, like below. Happy to elaborate if below code helps

on jsbin

function stretch() { // maybe call this expand?
 var boxes = document.getElementsByClassName('skill-boxes');
 var skills = document.getElementsByClassName('para');
 for (var i=0; i < boxes.length; i++) {
 boxes[i].style.opacity = "0.3";
 boxes[i].style.transform = "scaleY(10)";
 boxes[i].style.borderRadius = "0px";
 boxes[i].style.transition = "opacity 2s, transform 2s, border-radius 1s ease-in-out";
 }
}
function stretchback() { // maye call this shrink?
 var boxes = document.getElementsByClassName('skill-boxes');
 var skills = document.getElementsByClassName('para');
 for (var i=0; i < boxes.length; i++) {
 boxes[i].style.opacity = "1";
 boxes[i].style.transform = "scaleY(1)";
 boxes[i].style.borderRadius = "10px";
 boxes[i].style.transition = "opacity 2s, transform 2s, border-radius 1s ease-in-out";
 }
}