I want to create the movement buttons for some text to move it around the page in four directions. However when I press some of them more than once, they stop working. I need them to move exactly with 100px.
$("#up").click(function() {
$("#text").css("bottom", "+=100px")
})
$("#left").click(function() {
$("#text").css("right", "+=100px")
})
$("#down").click(function() {
$("#text").css("top", "+=100px")
})
$("#right").click(function() {
$("#text").css("left", "+=100px")
})
.controls {
position: absolute;
display: flex;
}
.text {
position: relative;
bottom: 0;
}
<div class="text" style="text-align: center;" id="text">
Hello world
</div>
<br>
<br>
<div class="controls">
<button id="left">left</button>
<button id="down">down</button>
<button id="right">right</button>
<button id="up">up</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>