向上翻页，向下翻页，向上和向下键在我的页面上不起作用

Question

I'm making a portfolio to show my projects. So when someone clicks on Project 1 in the menu, a new div (div#project1) will slide in from the left like a new page to show Project 1.

Problem

1. Page up, page down, up and down arrows don't work on this div (div#project1) automatically.
2. I need to click on the div (div#project1) first before I can scroll with the keyboard.

How can I make it automatic? Looking for javascript answers! Thank you

 function project() { document.getElementById("project1").toggleClass('show'); document.getElementById('project1').addEventListener('click', function() { this.classList.toggle('focus'); // or whatever... this.focus(); }); } HTMLElement.prototype.addClass = function(string) { if (!(string instanceof Array)) { string = string.split(' '); } for (var i = 0, len = string.length; i < len; ++i) { if (string[i] && !new RegExp('(\\\\s+|^)' + string[i] + '(\\\\s+|$)').test(this.className)) { this.className = this.className.trim() + ' ' + string[i]; } } } HTMLElement.prototype.toggleClass = function(string) { if (string) { if (new RegExp('(\\\\s+|^)' + string + '(\\\\s+|$)').test(this.className)) { this.className = this.className.replace(new RegExp('(\\\\s+|^)' + string + '(\\\\s+|$)'), ' ').trim(); } else { this.className = this.className.trim() + ' ' + string; } } } HTMLElement.prototype.removeClass = function(string) { if (!(string instanceof Array)) { string = string.split(' '); } for (var i = 0, len = string.length; i < len; ++i) { this.className = this.className.replace(new RegExp('(\\\\s+|^)' + string[i] + '(\\\\s+|$)'), ' ').trim(); } } 

 .project { position: fixed; top: 0; width: 100vw; transition: all .5s; z-index: 100; left: 100vw; background: #fff; overflow-y: scroll; bottom: 0; } .show { left: 0vw!important; } 

 <div id="menu"> <h2 onclick="project()">Project 1</h2> </div> <div id="project1" class="project" onclick="project()"> <h1>Project 1</h1> <center> <img src="x.png"> </center> </div> 

Answer 1

You need to execute the focus method outside of the inner click listener callback. And when you hide the project details it is probably good to remove the focus from that:

function project() {
    const proj = document.getElementById("project1");
    proj.classList.toggle('show');
    proj.addEventListener('click', function() {
        this.classList.toggle('focus');
        this.blur(); // Remove focus
    });
    proj.focus(); // Set the focus on the project details that just appeared.
}