Как сделать увеличение фигуры при клике на неё на 50px и уменьшение на 100px при достижении значения в 1000px HTML JS

Рейтинг: 0Ответов: 1Опубликовано: 11.05.2023

Суть задания:

  • Вставьте блок шириной 100px.
  • Курсор над блоком должен иметь вид "ладошки". Остальные стили подберите самостоятельно.
  • Каждый щелчок по блоку должен приводить к увеличению ширины блока на 50px. Если ширина блока станет больше 1000px, то ширина должна сброситься обратно в 100px.

function boom(div) {
  width = bodyInnerWidth + 'px';
  // let width = div.offsetWidth;
  if (width < '1000px') {
    div.style.width = `${width + 50}px`;
    // width += 50;
    // let h= width + 'px';
    // div.style.width = h;
  } else {
    div.style.width = '100px';
  }
}
.block2 {
  cursor: pointer;
  border: 2px solid;
  color: rgb(40, 7, 255);
  border-color: darkmagenta;
  font-size: 14px;
  padding: 15px;
  height: 50px;
  width: 100px;
  /* margin: 10px auto; */
  font-weight: bold;
  background-color: rgb(0, 255, 0);
  text-align: center;
  position: relative;
  margin: 10px auto;
}
<div class="block2"></div>

css javascript html
Источник: Stack Overflow на русском

Ответы

▲ 2

function boom(div) {
  let bodyInnerWidth = div.offsetWidth + 50;
  if (bodyInnerWidth >= 1000) bodyInnerWidth = 100;
  div.style.width = bodyInnerWidth + 'px';
  div.textContent = bodyInnerWidth + 'px';
}
.block2 {
  cursor: pointer;
  border: 2px solid;
  color: rgb(40, 7, 255);
  border-color: darkmagenta;
  font-size: 14px;
  padding: 15px;
  height: 50px;
  width: 100px;
  /* margin: 10px auto; */
  font-weight: bold;
  background-color: rgb(0, 255, 0);
  text-align: center;
  position: relative;
  margin: 10px auto;
}
<div class="block2"></div>