Почему setInterval() срабатывает только один раз в манипуляции с DOM элементами

Question

Помогите пожалуйста, задаю через setInterval(), что бы высота бокса изменялась на 50px через одну секунду. Но происходит срабатывание только один раз, элемент растет на 50px один раз и все, остальные инкременты просто игнорируются в стилях. Почему так происходит.

let app = document.querySelector('.box')
let px = 0

setInterval(() => {
  px = px + 50
  app.style.width = app.style.width + px + 'px';
  console.log(app.style.width + px + 'px');
}, 1000)

.box {
  background-color: grey;
}

<div class="box">box</div>

Answer 1

В данном случае строка

app.style.width = app.style.width  + px + 'px'

не особо имеет смысл. достаточно

app.style.width = px + 'px'

let app  = document.querySelector('.box')
let px = 0

setInterval (()=>{
  px = px + 50  
  app.style.width =  px + 'px'
},1000)

.box {
  border: 1px solid black;
  width: 20px;
  height: 20px;
}

<div class="box"></div>

А не происходит дальнейший рост потому, что на первой итерации в app.style.width записывается строка 50px, а на следующей итерации эта строка пытается сложиться (произвести сложение) с числом. Конечно ничего не получится. Нужно перед сложением в таком случае строку привести к числу

let app  = document.querySelector('.box');
let delta = 50;

setInterval (()=>{    
  app.style.width = (parseInt(app.style.width) || 0) + delta + 'px'
},1000)

.box {
  border: 1px solid black;
  width: 20px;
  height: 20px;
}

<div class="box"></div>

Answer 2

let app  = document.querySelector('.box')
let px = 0

setInterval (()=>{
  px = px + 50
  app.style.width =  px + 'px'
},1000)

.box{
    background-color: red;
    border: 1px solid blue;
    width:0px;
    height:50px;
}

<div class="box"></div>

БЛОГ НА HUSL

Почему setInterval() срабатывает только один раз в манипуляции с DOM элементами

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