Can anyone tell me why the "#obj" doesn’t move?

Asked

Viewed 119 times

0

/*ignorem o que tem a cima, o importante é na 'areaTestes', onde a bola não se desloca para baixo, sendo que eu estou chamando a função a cada 1s, ela não deveria descer?*/
<!DOCTYPE html>
<html lang = "pt-br">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>TESTES</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">


</head>
<body>
    <style type="text/css">
    body{
        background-color: #00bbff;
    }
    /*predefinido pra uso sla*/
    .toast{
        background-color: black;
        border-radius: 10px;
        color: white;
        padding: 10px;
    }
    div{
        background-color: coral;
    }
    /*TESTES DE ENTENDIMENTO DIV E SPAN COM DISPLAYS*/
    span{
        background-color: dodgerblue;
    }
    div:nth-child(2), span{
        height: 30px;
        width: 100px;
    }
    /*TESTES POSITIONS COM %*/
    .fora{
        position: relative;
        padding: 20px;
        width: 400px;
        height: 400px;
        background-color: chartreuse;
    }
    .dentro{
        width: 100%;
        height: 50px;
        position: absolute; /*conteudo + padding (com o relative no pai), sem o relative ele pega a partir do viewport*/
    }
    .areaTestes{
        position: relative;
        width: 1200px;
        height: 700px;
        background-color: darkcyan;
        border: 3px solid black;
        margin: 30px 0;
    }
    .obj{
        width: 100px;
        height: 100px;
        background-color: green;
        border: 2px double aqua;
        border-radius: 50px;
        position: absolute;
        top: 0px;
    }
    </style>
    <center>
    <div id="toast" class="toast">
        This is a TOAST!!
        </div>

        <div>Div Teste</div>
        <span>Span Teste</span>

        <div class="fora">
            <div class="dentro"></div>
        </div>


        <div class="areaTestes">
            <div class="obj" id="objID"></div>
        </div>
    </center>

    <script>
           var obj = document.getElementById('objID')

           var getY = () => parseInt(obj.style.top.split('px')[0])
            var setY = y => obj.style.top = `${y}px`

           function deslocamento(top) {
            setY(getY() - top)
           }
           setInterval(() => {
            deslocamento(10)
           }, 1000)
    </script>
</body>
</html>
javascript javascript-events
  • 1

    First thing, the variables you are trying to use within the functions are being declared outside the scope of the function and are not global, so the function cannot see them.

1 answer

1

Its function getY is returning NAN when running the first time, top does not have a defined value.

You can use a ternary conditional operator to return a value if top does not have a value, in this example I put to return zero.

var getY = () => parseInt(obj.style.top != '' ? obj.style.top.split('px')[0] : 0)

  • Thanks!! I took the test and really was returning Nan, but since I had already set the "0" in css, I thought I would return 0, but apparently not

Browser other questions tagged javascript javascript-events

You are not signed in. Login or sign up in order to post.