Javascript - Divs Swap sur KeyDown

voix
1

Je peux échanger deux divs en cliquant sur un lien, comme indiqué dans le code suivant, mais comment puis-je les échanger en appuyant sur une touche?

Voilà ce que j'ai:

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>

Je l'ai utilisé OnKeyDown avant, mais je ne peux pas comprendre comment l'appliquer ici ...

Cela ne fonctionne tout simplement pas:

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

Créé 19/09/2018 à 13:22
source utilisateur
Dans d'autres langues...                            


1 réponses

voix
2

  1. Si vous appelez une fonction que vous écrivez ne pas le mot-clé « fonction » devant elle.

  2. Vous avez passé deux variables non existantes appelées div1et div2dans la fonction SwapDivsqui a été appelée dans l'écouteur d'événement.

  3. Si vous ajoutez un événement Listener au corps, vous devez ajouter la <body>balise.

À titre d'exemple je « flèche vers le bas Key » qui a le mot de code 40.

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

Voici un codepen: https://codepen.io/anon/pen/MqZomW

Créé 19/09/2018 à 13:24
source utilisateur

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