Разместить на странице блок с маленьким блоком внутри и 4 кнопки (со стрелками) возле него

Question

Полное описание задания: Разместить на странице блок с маленьким блоком внутри и 4 кнопки (со стрелками) возле него. По клику на любую из кнопок со стрелками маленький блок должен двигаться в нужную сторону с шагом в 10px. Важно: блок не должен выйти за пределы контейнера

Не понимаю как сделать чтобы блок не выходил за пределы границы

вот ссылка на мой код:

<div class="container">
    <div class="smallblock"></div>
    <section class="button4">
        <button id="up">up</button>
        <button id="down">down</button>
        <button id="left">left</button>
        <button id="right">right</button>

    </section>
</div>

https://jsfiddle.net/Flade/chjg2fs4/

Answer 1

Все довольно просто нужно ограничить блоку движение как только он упрется в границу родителя:

let leftButton = document.querySelector("#left");
let rightButton = document.querySelector("#right");
let upButton = document.querySelector("#up");
let downButton = document.querySelector("#down");
let ball = document.querySelector(".smallblock");
let cont = document.querySelector(".container");
let widthBall = parseInt(getComputedStyle(ball).width);
let heightBall = parseInt(getComputedStyle(ball).height);
let widthBlock = parseInt(getComputedStyle(cont).width);
let heightBlock = parseInt(getComputedStyle(cont).height);

upButton.addEventListener("click", function(e) {

  let goUp = ball.offsetTop;
  if (goUp > 0)
    ball.style.top = goUp - 10 + "px";
});
downButton.addEventListener("click", function(e) {
  let goDown = ball.offsetTop;
  if (goDown < cont.clientHeight - ball.clientHeight)
    ball.style.top = goDown + 10 + "px";
});
leftButton.addEventListener("click", function(e) {
  let goLeft = ball.offsetLeft;
  if (goLeft > 0)
    ball.style.left = goLeft - 10 + "px";
});
rightButton.addEventListener("click", function(e) {
  let goRight = ball.offsetLeft;
  if (goRight < cont.clientWidth - ball.clientWidth)
    ball.style.left = goRight + 10 + "px";
});

.container {
  width: 370px;
  height: 270px;
  border: 1px solid black;
  position: relative;
}

.button4 {
  position: absolute;
  top: 300px;
  left: 75px;
  width: 300px;
}

.smallblock {
  width: 50px;
  height: 50px;
  border: 1px solid;
  border-radius: 75%;
  background-color: black;
  position: absolute;
}

<div class="container">
  <div class="smallblock"></div>
  <section class="button4">
    <button id="up">up</button>
    <button id="down">down</button>
    <button id="left">left</button>
    <button id="right">right</button>

  </section>
</div>

Answer 2

В принципе Andrei вам уже всё правильно показал, но не учёл один момент в CSS со свойством .smallblock {border: ...} из-за чего вправо и вниз происходят пересечения границы. Это легко поправимо. Однако от себя хочу заметить, что у вас там столько переменных создаётся на лету безо всякой нужды, что глаза разбегаются.) Можно же быть гораздо легче:

let ball = document.querySelector(".smallblock");
let cont = document.querySelector(".container");

up.addEventListener("click", function(e) {
    if (ball.offsetTop > 0)
        ball.style.top = ball.offsetTop - 10 + "px";
});
down.addEventListener("click", function(e) {
    if (ball.offsetTop < cont.clientHeight - ball.clientHeight)
        ball.style.top = ball.offsetTop + 10 + "px";
});
left.addEventListener("click", function(e) {
    if (ball.offsetLeft > 0)
        ball.style.left = ball.offsetLeft - 10 + "px";
});
right.addEventListener("click", function(e) {
    if (ball.offsetLeft < cont.clientWidth - ball.clientWidth)
        ball.style.left = ball.offsetLeft + 10 + "px";
});

.container {
  width: 370px;
  height: 370px;
  border: 1px solid black;
  position: relative;
}

.buttons {
  position: absolute;
  top: 400px;
  text-align: center;
  width: 370px;
}

.smallblock {
  width: 50px;
  height: 50px;
  border-radius: 75%;
  background-color: red;
  position: absolute;
}

<div class="container">
  <div class="smallblock"></div>
  <section class="buttons">
    <button id="up">&#9650;</button>
    <button id="down">&#9660;</button>
    <button id="left">&#9668;</button>
    <button id="right">&#9658;</button>
  </section>
</div>

Не идеально в плане минификации и универсальности, но уже гораздо лучше.

БЛОГ НА HUSL

Разместить на странице блок с маленьким блоком внутри и 4 кнопки (со стрелками) возле него

Ответы (2 шт):