Как сделать изменение параметра translate при нажатии кнопки?

Question

[Molder84]

function right2_m() {
	const ml = document.getElementById("box")

    let left = ml.style.transform
    left = left.split(',', 2)
    left[0] = Number(left[0].replace(/\D/g,''));
    left[1] = Number(left[1].replace(/\D/g,''));
    //console.log("вправо" + left[0] + " x " + left[1])

    let new_x = left[0] + 30;

    ml.style.transform = 'translate(' + new_x + 'px,' + left[1]  + 'px)'
}

function bottom2_m() {
	const m2 = document.getElementById("box")

    let left2 = m2.style.transform
    left2 = left2.split(',', 2)
    left2[0] = Number(left2[0].replace(/\D/g,''));
    left2[1] = Number(left2[1].replace(/\D/g,''));
    //console.log("влево" + left2[0] + " x " + left2[1])

    let new_y = left2[1] + 30;

    m2.style.transform = 'translate(' + left2[1] + 'px,' + new_y  + 'px)'
}

Весь код выложить не получилось, ссылка https://disk.yandex.ru/d/QQ82r_r_VDCZnA

Comments

[VoidVolker]

Molder84 Используйте JSFiddle / CodePen для удобства.

[Kryptonit]

<div id="box">
</div>
<button class ="but">hello</button>

#box{
  border: 1px solid black;
  width: 300px;
  height: 200px;
  transform: translate(100px, 30px)
}

function bottom2_m() {
  
  const m2 = document.querySelector('#box')
  let left2 = window.getComputedStyle(m2).transform
  
  left2 = left2.split(',')//['matrix(1, 0, 0, 1, 100, 30)']
  left2 = [Number(left2[4]), Number(left2[5].slice(0, -1))]
  console.log(left2, 'hello')
 

  let new_y = left2[1] + 30;

  m2.style.transform = 'translate(' + left2[1] + 'px,' + new_y  + 'px)'
}

button = document.querySelector('.but')
button.addEventListener( 'click', bottom2_m )

[Kryptonit]

element.style используется только для того, чтобы устанавливать стили, она их НЕ ИЗВЛЕКАЕТ, для этого непонятно зачем была создана getComputedStyle, обратите внимание, что в css я явно задал transform.