Javascript - Обмен Divs на KeyDown
Я могу поменять местами два div, щелкнув ссылку, как показано в следующем коде, но как мне поменять местами их, нажав клавишу?
Вот что у меня есть:
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);
}
});Я пробовал это: document.body.addEventListener ("keydown", function (event) {if (event.keyCode === 32) {SwapDivs (div1, div2);}}); Но все равно не работает ...
Думаю, вы упустили ключевой момент моего комментария. Попробуйте это: ocument.body.addEventListener("keydown", function(event) { if (event.keyCode === 32) { SwapDivs('FirstDiv', 'SecondDiv'); } });
Решил это. Спасибо за помощь.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Если вы вызываете функцию, вы не пишете перед ней ключевое слово «функция».
Вы передали две несуществующие переменные с именами
div1иdiv2в функциюSwapDivs, которая была вызвана внутри прослушивателя событий.Если вы добавляете прослушиватель событий в тело, вам необходимо добавить тег
<body>.
В качестве примера я использовал «клавишу со стрелкой вниз» с кодом 40.
document.body.addEventListener("keydown", function(event) {
if (event.keyCode === 40) {
SwapDivs('FirstDiv','SecondDiv');
}
});Вот код: https://codepen.io/anon/pen/MqZomW
Спасибо, но у меня это не работает. Я пробовал на странице, на которую вы ссылаетесь, а также пытался скопировать и вставить код и открыть его в Firefox, Chrome и IE. Ссылки по-прежнему работают, но когда я нажимаю клавишу пробела, ничего не происходит ... Как вы думаете, в чем проблема?
Он работает с клавишей со стрелкой вниз. Я изменил код клавиши на 32 (пробел), и он начал работать. Большое спасибо за Вашу помощь!
не следует ли вам вызывать
SwapDivsс параметрами «FirstDiv» и «SecondDiv», как вы это делали для рабочего примера со ссылкой?