On the left side of the container, there is a button with the text "Go Right!". When clicked in this position, the button moves to the right side of the container. When the button is on the right side, the text changes to "Go Left!" and clicking it will move the button back to the left side.
I have attempted the following: html:
<body>
<div class="container">
<button id="flip-flop" onclick="moveRight()">Go Right!</button>
</div>
</body>
js file:
function moveRight(){
const flip_flip_button = document.getElementById("flip-flop")
flip_flip_button.addEventListener("click", function () {
flip_flip_button.style.left = 400 + "px";
});
}
css:
.container {
position: fixed;
top: 50%;
left: 50%;
width: 50%;
background-color: gray;
transform: translate(-50%, -50%);
}
#flip-flop{
position: relative;
}
After running this code, the button does move to the right (perhaps after the second click) but it is not responsive. How can I restrict the movement to just until the right side of the container?