Javascript - Поменять Divs на KeyDown

голоса
1

Я могу поменять два дивы, нажав на ссылку, как показано в следующем коде, но как я могу поменять их, нажав клавишу?

Это то, что у меня есть:

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>

Я использовал OnKeyDown раньше, но я не могу понять, как применить его здесь ...

Это просто не работает:

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

Задан 19/09/2018 в 13:22
источник пользователем
На других языках...                            


1 ответов

голоса
2

  1. При вызове функции вы не пишите «функцию» ключевое слово перед ним.

  2. Вы прошли две несуществующие переменные , называемые div1и div2в функции , SwapDivsкоторая была вызвана внутри слушателя событий.

  3. Если вы добавляете слушатель событий для тела, вы должны добавить <body>тег.

В качестве примера я использовал «Стрелка вниз Key», который имеет клавиатурный код 40.

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

Вот codepen: https://codepen.io/anon/pen/MqZomW

Ответил 19/09/2018 в 13:24
источник пользователем

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