Divs swap em KeyDown - Javascript

votos
1

Posso trocar duas divs, clicando em um link, como mostrado no código a seguir, mas como faço para trocá-los pressionando uma tecla?

Isto é o que eu tenho:

function SwapDivs(div1, div2) {
        d1 = document.getElementById(div1);
        d2 = document.getElementById(div2);
        if (d2.style.display == none) {
            d1.style.display = none;
            d2.style.display = block;
        } else {
            d1.style.display = block;
            d2.style.display = none;
        }
    }
<p>
    <a href=javascript:SwapDivs('FirstDiv','SecondDiv')>Swap Divs</a>
</p>


<div id=FirstDiv style=display:block>
    <p>
        This div is displayed when the page opens.
    </p>
</div>

<div id=SecondDiv style=display:none>
    <p>
        This div is displayed when the link is clicked.
    </p>
</div>

Eu tenho usado OnKeyDown antes, mas eu não consigo descobrir como aplicá-lo aqui ...

Isso simplesmente não funciona:

    document.body.addEventListener(keydown, function(event) {
        if (event.keyCode === 32) {
            function SwapDivs(div1, div2);
        }
    });

Publicado 19/09/2018 em 13:22
fonte usuário
Em outras línguas...                            


1 respostas

votos
2

  1. Se você chamar uma função que não escreva a palavra-chave "função" antes dele.

  2. Você passou duas variáveis que não existem chamados div1e div2na função SwapDivsque foi chamado dentro do ouvinte de evento.

  3. Se você estiver adicionando um ouvinte de eventos para o corpo, você tem que adicionar a <body>tag.

Como exemplo eu usei "seta para baixo", que tem o código de acesso 40.

    document.body.addEventListener("keydown", function(event) {
        if (event.keyCode === 40) {
           SwapDivs('FirstDiv','SecondDiv');
        }
    });

Aqui está uma codepen: https://codepen.io/anon/pen/MqZomW

Respondeu 19/09/2018 em 13:24
fonte usuário

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more