Div de intercambio en KeyDown - Javascript

votos
1

Puedo intercambiar dos divs haciendo clic en un enlace, como se muestra en el siguiente código, pero cómo puedo cambiar pulsando una tecla?

Esto es lo que tengo:

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>

He utilizado OnKeyDown antes, pero no puedo encontrar la manera de aplicarlo aquí ...

Esto simplemente no funciona:

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

Publicado el 19/09/2018 a las 13:22
fuente por usuario
En otros idiomas...                            


1 respuestas

votos
2

  1. Si se llama a una función no se escribe la palabra clave "función" antes de ella.

  2. Pasaste dos variables que no existen los llamados div1y div2en la función SwapDivsque se llama en el interior del detector de eventos.

  3. Si va a añadir un detector de eventos para el cuerpo, hay que añadir la <body>etiqueta.

Como ejemplo he usado "tecla de flecha hacia abajo", que tiene el código clave 40.

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

He aquí una codepen: https://codepen.io/anon/pen/MqZomW

Respondida el 19/09/2018 a las 13:24
fuente por usuario

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