-2

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}%)`
});
1
  • Por favor, não repita perguntas. Os comentários aqui foram bloqueados, siga as instruções fornecidas na pergunta original. Se precisarem comentar, façam na pergunta original.
    – Syzoth
    Commented 8/07 às 18:56

0

Pesquise outras perguntas com a tag .