Javascript - Swap Divs op KeyDown

stemmen
1

Ik kan twee divs wisselen door te klikken op een link, zoals in de volgende code, maar hoe kan ik ze te verwisselen door op een toets?

Dit is wat ik heb:

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>

Ik heb al eerder gebruikt onKeyDown, maar ik kan niet achterhalen hoe het hier toe te passen ...

Dit werkt gewoon niet:

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

De vraag is gesteld op 19/09/2018 om 13:22
bron van user
In andere talen...                            


1 antwoorden

stemmen
2

  1. Als u een functie bel je niet schrijven de "functie" keyword ervoor.

  2. Je bent geslaagd twee non-existent Variabelen genoemd div1en div2in de functie SwapDivsdie werd genoemd in het evenement luisteraar.

  3. Als u het toevoegen van een event-listener aan het lichaam, moet u de toe te voegen <body>tag.

Als voorbeeld gebruikte ik "Pijl omlaag Key" die de toegangscode 40 heeft.

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

Hier is een codepen: https://codepen.io/anon/pen/MqZomW

antwoordde op 19/09/2018 om 13:24
bron van user

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