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?

FYI: i < document.getElementsByClassName('skill-boxes').length; The performance of that is bad. — epascarello
– epascarello, Commented Oct 17, 2017 at 20:39
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. — David
– David, Commented Oct 17, 2017 at 20:41
@David I corrected the code and now I am only declaring the variable once as a global one. It gives the same error. — Krisztian Toth
– Krisztian Toth, Commented Oct 17, 2017 at 20:52

Fenton · Accepted Answer · 2017-10-17 20:50:47Z

3

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)";

answered Oct 17, 2017 at 20:50

Fenton

253k74 gold badges404 silver badges414 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Piotr Pasieka Over a year ago

just for a record - opening and closing braces are missing

Fenton Over a year ago

Thanks @PiotrPasieka - and on both loops! Always use those curly braces :) stevefenton.co.uk/2010/05/always-use-those-curly-braces

Bergi Over a year ago

You might also want to vote to close as a typographical mistake.

sm1215 · Accepted Answer · 2017-10-17 20:42:06Z

0

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

answered Oct 17, 2017 at 20:42

sm1215

5362 silver badges14 bronze badges

1 Comment

sm1215 Over a year ago

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

Keming · Accepted Answer · 2017-10-17 20:48:34Z

0

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

answered Oct 17, 2017 at 20:48

Keming

2531 gold badge4 silver badges12 bronze badges

Comments

Varinder · Accepted Answer · 2017-10-17 20:50:39Z

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";
    }
}

Collectives™ on Stack Overflow

JavaScript loop doesn't work

4 Answers 4

3 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related