javascript - キーボードのキーを使用して要素を表示および非表示にするにはどうすればよいですか？

Question

私はちょうど質問者のアプリケーションを作った。私は隠して質問を表示する、次と前の関数とjavascriptのボタンがあります。

私は次と前の、例のキーのショートカットを作成したい：

左矢印 - >それは前の質問 右矢印に行きます - >それは次の質問

に行くだろうし以下は、私のスクリプトからの抜粋です：

<form> 
    <div id="question1" class="cont active"> </ div> 
    <div id="question2" class="cont hide"> </ div> 
    <div id="question3" class="cont hide"> </ div> 
</form> 

私は右矢印を押すと、私は矢印左を押した場合、その後、div#questionを非表示にするとdiv#question2がアクティブであるべき、と反対。私は立ち往生している、私は参照を探して誰かが助けることを願っています。

document.getElementById('question1').style.display = "none"; 

して再度表示するには：たとえば、あなたが使用できる要素を非表示にするには

document.onkeydown = function(e){ 

    if(e.key == "ArrowLeft" && e.target == document.body){ 
    //left arrow 
    } 
    if(e.key == "ArrowRight" && e.target == document.body){ 
    //right arrow 
    } 
} 

を：

Answer 1

キーの押下をキャプチャするには、あなたは試みることができる

document.getElementById('question1').style.display = "block"; 

Answer 2

矢印キーは​​でキャプチャできます。

例にここで

var activeQuestion = 1; 
document.addEventListener('keydown', function(ev) { 
    if(ev.key === "ArrowLeft" && activeQuestion > 1){ 
     hide('question' + activeQuestion); // hide current element 
     show('question' + --activeQuestion); // show next element 
    } 
    else if( ev.key === "ArrowRight" && activeQuestion < 3 ){ 
     hide('question' + activeQuestion); 
     show('question' + ++activeQuestion); 
    } 
}) 

function hide (elementId){ 
    let el = document.getElementById(elementId); 
    el.className = el.className.replace('active', 'hide'); 
} 
function show(elementId){ 
    let el = document.getElementById(elementId); 
    el.className = el.className.replace('hide', 'active'); 
} 

： https://jsfiddle.net/634vma8r/ 動作するように長方形の面積のクリックを押し - >と< - 。