How do I move a div vertically using pure JS?

Question

How do I move a div vertically using pure JS?

Navigation

#1 by (1 votes)

3

I was able to move horizontally using buttons (), and the onlcik method, however when I try to do the same however vertically using .style.bottom or .style.top and tried to change the increment however the position of my object does not change.

html:

<div id="caixa"> 
        <div id="caixinha">


        </div>
    </div>
    <br>
    <div>
        &emsp;&emsp;<button onclick = "MovUp()">↑</button>
        <br>
        <button onclick="movimentoDireita()"> ← </button>
        <button onclick="movBaixo">↓</button>
        <button onclick="movimentoEsquerdo()"> →</button>
    </div>

css:

#caixa{
            width: 200px;
            height: 200px;
            background: green;
            position: relative;   
        }
        #caixinha{
            width: 50px;
            height: 50px;
            background: red;
            position: absolute;
        }

js:

        var posH = 0
        var posL = 0
        var caixinhafilha = document.getElementById("caixinha")
        function MovUp(){
            if(posH<=0){

                caixinhafilha.style.top = posH + "px"

            }else{

                posH-- 
                caixinhafilha.style.top = posH + "px"
            }
        }
        function movBaixo(){
            if(posH>=150){

                caixinhafilha.style.bottom = posH + "px"

            }else{

                posH++
                caixinhafilha.style.bottom= posH + "px"
            }
        }

javascript

asked by anonymous 08.11.2018 / 22:02

1 answer

How to do an update in two tables that does not return "safe update mode" in MySQL? Do instances of the same application share static objects?

score 1 · Accepted Answer

Code problems:

The parentheses are missing when calling the function in onclick="movBaixo" .
In function movBaixo() , else should be style.top .
In the first condition of if 's, you can set the value to 0 .

var posH = 0
var posL = 0
var caixinhafilha = document.getElementById("caixinha")
function MovUp(){
   if(posH<=0){

       caixinhafilha.style.top = "0"

   }else{

       posH-- 
       caixinhafilha.style.top = posH + "px"
   }
}
function movBaixo(){
   if(posH>=150){

       caixinhafilha.style.bottom = "0"

   }else{

       posH++
       caixinhafilha.style.top= posH + "px"
   }
}

#caixa{
   width: 200px;
   height: 200px;
   background: green;
   position: relative;   
}
#caixinha{
   width: 50px;
   height: 50px;
   background: red;
   position: absolute;
}

<div id="caixa"> 
  <div id="caixinha">


  </div>
</div>
<br>
<div>
  &emsp;&emsp;<button onclick = "MovUp()">↑</button>
  <br>
  <button onclick="movimentoDireita()"> ← </button>
  <button onclick="movBaixo()">↓</button>
  <button onclick="movimentoEsquerdo()"> →</button>
</div>