Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Can’t make circle to move

  • This topic is empty.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #44649
    Kuzyo
    Participant

    Hi guys.

    I now learning about getting current style of element and based on that want to make circle move, but can’t. Console don’t showing any errors and i can’t detect where is problem. Here is my script http://codepen.io/Kuzyo/pen/lFeya
    Thanks for the help.

    #134527
    CrocoDillon
    Participant

    ‘window = addEventListener(“load”, moveCircle, false);’ should be either `window.addEventListener(“load”, moveCircle, false);` or `addEventListener(“load”, moveCircle, false);` (doesn’t matter, still works)

    You overcomplicate things, `currentMarginLeft = circle.style.marginLeft;` is a lot easier.

    Anyway the problem is you should set `marginLeft` to a string that ends with a unit, like ‘px’. Try `currentMarginLeft += step;` and `circle.style.marginLeft = currentMarginLeft + ‘px’;`

    #134529
    Kuzyo
    Participant

    Hi, CrocoDillon.
    Why I made so with currentMarginLeft, because read this

    >The properties on the style object are only the styles applied directly to the element (e.g., via a style attribute or in code). So `.style.marginTop` will only have something in it if you have something specifically assigned to that element (not assigned via a style sheet, etc.).
    To get the current calculated style of the object, you use either the currentStyle property (Microsoft) or the getComputedStyle function (pretty much everyone else).

    Made how you said but still don’t work http://codepen.io/Kuzyo/pen/lFeya

    Sorry for bothering you ((

    #134530
    CrocoDillon
    Participant

    My bad, computedStyle gives back the margin as string including ‘px’.

    var currentMarginLeft = parseInt(computedStyle.marginLeft);

    #134531
    CrocoDillon
    Participant

    > The properties on the style object are only the styles applied directly to the element.

    You’re right :)

    #134534
    Kuzyo
    Participant

    Everything works fine) Thanks again. Can you explain why it doesn’t work in this way

     circle.style.marginLeft = currentMarginLeft + step + "px";
    #134535
    CrocoDillon
    Participant

    You arent updating currentMarginLeft so it always stays at 0, you are setting marginLeft to ‘2px’ the whole time.

    You can always use `console.log(…)` to quickly debug things. Like `console.log(currentMarginLeft);` would tell you it stays 0.

    #134537
    Kuzyo
    Participant

    Thanks a lot. But maybe I will come with this circle again )

    #134835
    Kuzyo
    Participant

    Hi guys, I don’t want to start new discussion and decided to continuing in the same. After circle started to move( with your greate help) and now i want it to stop. This is snippet of my function

    var circle = document.getElementById("circle"),
    computedStyle = window.getComputedStyle(circle, ""),
    bodyWidth = document.body.clientWidth,
    speed = 10,
    step = 2,
    timerLeft;

    function moveCircleLeft() {

    var currentMarginLeft = parseInt(computedStyle.marginLeft);

    if (currentMarginLeft < bodyWidth) {
    timerLeft = setInterval(moveLeft, speed);
    } else {
    clearInterval(timerLeft);
    };

    function moveLeft() {
    currentMarginLeft += step;
    circle.style.marginLeft = currentMarginLeft + "px";
    }
    }

    window.addEventListener("click", moveCircleLeft, false);

    I think the problem in condition **(currentMarginLeft < bodyWidth)** Thanks for the help and I really red with shame

    #134838
    Kuzyo
    Participant

    Hi @Mottie!

    Thanks, but why this condition doesn’t work

    if (currentMarginLeft < bodyWidth) {
    timerLeft = setInterval(moveLeft, speed);

    } else {
    clearInterval(timerLeft);
    };

    ‘ for me it seems: if currentMarginLeft < bodyWidth start Interval if not stop Interval

    #134841
    Kuzyo
    Participant

    :)))) Thanks @Mottie everything became clear

Viewing 11 posts - 1 through 11 (of 11 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.