How to reference a div in javascript using another's id

Question

I'm trying to get planets to orbit around a sun (like our solar system) but pause when you hover over them. I have tried using IDs and classes but with no success. Here is my code (Done for all planets):

var divs = document.getElementsByClassName("planet");
    if(true == true) {
     for(var i = 0; i < divs.length; i++){
      divs.onmouseover = function() {mouseOver(i)}
      divs.onmouseout = function() {mouseOut(i)}
     }
    }
    function mouseOver(d) {
     var orbitOver = document.getElementById(d.id + "-orbit");
     orbitOver.style.animation-play-state = paused;
    }
    
    function mouseOut(d) {
     var orbitOut = document.getElementById(d.id + "-orbit");
     orbitOut.style.animation-play-state = running;
    }

    #jupiter {
        position: absolute;
        top: 0;
        left: 50%;
        height: 50px;
        width: 50px;
        margin-left: -25px;
        margin-top: -25px;
        border-radius: 50%;
     background: -moz-linear-gradient(top, #a39f68 1%, #e2e2e2 13%, #e2e2e2 13%, #96875e 28%, #ededed 44%, #96875e 59%, #96875e 59%, #a39f68 78%, #96875e 100%);
     background: -webkit-linear-gradient(top, #a39f68 1%,#e2e2e2 13%,#e2e2e2 13%,#96875e 28%,#ededed 44%,#96875e 59%,#96875e 59%,#a39f68 78%,#96875e 100%);
     background: linear-gradient(to bottom, #a39f68 1%,#e2e2e2 13%,#e2e2e2 13%,#96875e 28%,#ededed 44%,#96875e 59%,#96875e 59%,#a39f68 78%,#96875e 100%);
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a39f68', endColorstr='#96875e',GradientType=0 );
    }
    
    #jupiter-orbit {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 400px;
        height: 400px;
        margin-top: -200px;
        margin-left: -200px;
        border-width: 2px;
        border-style: dotted;
        border-color: white;
        border-radius: 50%;
        -webkit-animation: spin-right 26s linear infinite;
        -moz-animation: spin-right 26s linear infinite;
        -ms-animation: spin-right 26s linear infinite;
        -o-animation: spin-right 26s linear infinite;
        animation: spin-right 26s linear infinite;
    }
    
    @-webkit-keyframes spin-right {
      100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }
    
    @keyframes spin-right {
      100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }

<body>
      <script type="text/javascript" src="planethover.js"></script>
      <p class="einfo">
        (Not to scale)<br>
        By marloso2
      </p>
      <div id="sun"></div>
        <div id="jupiter-orbit">
          <div id="jupiter" class="planet"></div>
        </div>
    </body>

Possible duplicate of [How to pause and resume CSS3 animation using JavaScript?](http://stackoverflow.com/questions/5804444/how-to-pause-and-resume-css3-animation-using-javascript) — Liam Sorsby, Nov 27 '15 at 19:30

HaukurHaf · Accepted Answer · 2015-11-27T19:58:33.070

0

When you reference CSS properties using javascript, camel case is usually used. So, a style property with the name background-color becomes backgroundColor.

Also, the property values themselves usually need to be strings, so you need to quote them.

With that in mind, change animation-play-state, to animationPlayState, and wrap paused/running in quotes.

You might also have to use a vendor prefix, for example:

function mouseOver(d) {
    var orbitOver = document.getElementById(d.id + "-orbit");
    orbitOver.style.webkitAnimationPlayState = 'paused';
}

function mouseOut(d) {
    var orbitOut = document.getElementById(d.id + "-orbit");
    orbitOut.style.webkitAnimationPlayState = 'running';
}

Upon closer inspection, your code has more issues.

The for loop which assigns the events is incorrect, should be like this:

for(var i = 0; i < divs.length; i++){
    divs[i].onmouseover = function() {mouseOver(this)}
    divs[i].onmouseout = function() {mouseOut(this)}        
}

Working version here: http://jsfiddle.net/dzb9ww83/

edited Nov 27 '15 at 19:58

answered Nov 27 '15 at 19:40

HaukurHaf

13,522
5
44
59

The camel case and quotes didn't help. – marloso2 Nov 27 '15 at 19:50
That didn't help either. Here is my full version: http://jsfiddle.net/marloso2/vqnxqx4j/ – marloso2 Nov 27 '15 at 20:07
You were referencing orbitOver in the mouseOut function which caused some javascript errors. I fixed that here: http://jsfiddle.net/vqnxqx4j/2/ But there's something else wrong with this. The elements dont seem to receive the mouseout/over events properly. Sorry, I don't have time to dive in any further. – HaukurHaf Nov 27 '15 at 20:15
I noticed that it doesn't recieve properly. Thanks anyways. – marloso2 Nov 27 '15 at 20:20

How to reference a div in javascript using another's id

1 Answers1