javascriptでkeyPressedを使って次の要素に移動するにはどうすればよいですか？

私は、プレゼンテーションビューのkeyPressed（）関数を使って次のセクションに行きたいと思います。私はjQueryのようなフレームワークなしでこれを行うのが好きです。javascriptでkeyPressedを使って次の要素に移動するにはどうすればよいですか？

document.addEventListener('keydown', (event) => { 
    keyPressed(); 
} 

var onPage=3; 
function keyPressed(){ 
    let sections = document.getElementByTag("section"); 
    onPage++; 
    GOTO: sections[onPage] //the href in the a element would be "../#sectionJJ" 
}

そして、私のhtmlであり：HTML5で

<section>content 1 <section> 
<section>content 2<section> 
<section>content 3<section> 
<section id="section4JJ">content 4<section> 
<section>content 5<section>

出典

2017-06-03 user3432681

だけでなく、どのようにそれに行くのですか？スクロール、表示、URLなど..... – epascarello

'セクション'とはどのようなもので、次の要素に関連していますか？ – brk

GOTO：セクション[onPage]は動作しません – user3432681

idがアンカーとして使用することができる要素メソッドを呼び出すための

。ジャンプする方法は、文字通り#section4JJに移動することです。レスキューにwindow.location従来のブラウザの場合、例えばyou must include an<a name="section4JJ"></a>

あなたがyourpage.html#section4JJにヒットし、そのページが十分に長ければ、ジャンプすることに気付くでしょう。そこでここでは実施例である：

var onPage = 0; 
 
document.addEventListener('keydown', function(){ 
 
    var sections = document.getElementsByTagName("section"); 
 
\t if(onPage < sections.length - 1){ 
 
\t \t onPage++; 
 
\t \t 
 
\t \t //GOTO: sections[onPage] //the href in the a element would be "../#sectionJJ" 
 
\t \t window.location = '#' + sections[onPage].id; 
 
\t } 
 
});

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
 
    <title>Document</title> 
 
</head> 
 
<body> 
 

 
<section id="sectionABC"><h1>content 1</h1><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></section> 
 
<section id="sectionDEF"><h1>content 2</h1><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></section> 
 
<section id="sectionXUV"><h1>content 3</h1><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></section> 
 
<section id="section4JJ"><h1>content 4</h1><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></section> 
 
<section id="section5FF"><h1>content 5</h1><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></section> 
 

 
</body> 
 
</html>

出典

2017-06-03 03:27:47 Dorival

javascriptでkeyPressedを使って次の要素に移動するにはどうすればよいですか？

答えて

関連する問題