O 'valorx' funciona individualmente. Mas o 'valory' só funciona quando o 'valorx' dispara o evento.
Qual motivo que o input 'valory' sozinho não consegue disparar o evento 'change' no código?
<header>
<h1>Centralização vertical usando 'transform: translate(x, y)'</h1>
<h3>
Altere os valores aqui => transform: translate(
<input type="number" placeholder=" (-)esq | (+)direita" name="valorx" id="valorx" class="mover">%
<input type="number" placeholder=" (-)cima | (+)baixo" name="valory" id="valory" class="mover">%
)
</h3>
<h3 id="result">Aq</h3>
</header>
<div id="conteiner">
<div id="conteudo">
</div>
</div>
Código Javascript:
const mover = document.querySelector('.mover')
mover.addEventListener('change', function(){
result = document.querySelector('#result')
function valorx(){
const valorx = document.querySelector('#valorx');
const x = valorx.value.length==0? -50:valorx.value;
return x
}
function valory(){
const valory = document.querySelector('#valory');
const y = valory.value.length==0? -50:valory.value;
return y
}
let x = valorx()
let y = valory()
result.innerHTML = x + ' / ' + y
document.querySelector('#conteudo').style.transform = `translate(${x}%, ${y}%)`
});