getElementByClassName not working with rotateY

Question

I've been working on this for a day. Looping thru an array of ids didn't work. queryAllSelectors didn't work. In both scenarios only the third of three divs is affected. I would love to get ByClassName work.

<header>
    <div onmouseover="rotateYDIV()" class="rotate3D">Thing A</div>
    <div onmouseover="rotateYDIV()" class="rotate3D">Thing B</div>
    <div onmouseover="rotateYDIV()" class="rotate3D">Thing C</div>
</header>

header {
    text-align: center;
}

div {
    width: 100px;
    height: 100px;
    background: gray;
    display: inline-block;
}



var y,n=0,ny=0,rotINT,rotYINT

function rotateYDIV()
{
    y=document.getElementsByClassName("rotate3D");
    clearInterval(rotYINT)
    rotYINT=setInterval("startYRotate()",1)
}

function startYRotate()
{
    ny=ny+1
    y.style.transform="rotateY(" + ny + "deg)"
    y.style.webkitTransform="rotateY(" + ny + "deg)"
    y.style.OTransform="rotateY(" + ny + "deg)"
    y.style.MozTransform="rotateY(" + ny + "deg)"
    if (ny==180 || ny>=360)
        {
        clearInterval(rotYINT)
        if (ny>=360){ny=0}
    }
}

Do you know the difference between an element and a collection of elements? — melpomene, Feb 11 '18 at 00:12
`getElementByClassName` will return a list of elements. You have to iterate over it. — Striped, Feb 11 '18 at 00:13

Ctznkane525 · Answer 1 · 2018-02-11T00:29:41.423

0

getElementByClassName returns an array. You have to loop through its elements.

function startYRotate()
{
    ny=ny+1
    for(var i = 0; i < y.length; i++)
    {


        y[i].style.transform="rotateY(" + ny + "deg)"
        y[i].style.webkitTransform="rotateY(" + ny + "deg)"
        y[i].style.OTransform="rotateY(" + ny + "deg)"
        y[i].style.MozTransform="rotateY(" + ny + "deg)"
        if (ny==180 || ny>=360)
            {
            clearInterval(rotYINT)
            if (ny>=360){ny=0}
        }
    }
}

edited Feb 11 '18 at 00:29

answered Feb 11 '18 at 00:14

Ctznkane525

7,297
3
16
40

The function is not called `getClassByName`, and it does not return an array. – melpomene Feb 11 '18 at 00:15
Why is the `ny` logic inside of your loop? – melpomene Feb 11 '18 at 00:23
mistake...moved it out of the loop...and i had the function name wrong that's represented above – Ctznkane525 Feb 11 '18 at 00:30
The function is not called `getElementByClassName`, and it does not return an array. – melpomene Feb 11 '18 at 00:31
Why is half of the `ny` logic inside of your loop? – melpomene Feb 11 '18 at 00:31
Thanks Ctznkane525. This works great for trigger every element in the array. I would like to trigger only the element hovered. – Andy Hadel Feb 11 '18 at 17:09

getElementByClassName not working with rotateY

1 Answers1