Javascript - Increasing value by keypress, only once

Question

im trying to get the value of a variable that i have to increase by 5 each time that the up key is pressed.

Currently i have the variable increasing upon keypress etc but the main problem i have is that from one keypress, the value will continue rise. For example, value would start at 5, upon one keypress would continue to rise by 5 each time and would stop just after 600. Whereas i want it to start at 5 then upon each keypress go to 10,15,20....

Here's the code i have, i'd be grateful for the help on where im going wrong etc

var projectoryHeight = 5;

function setHeight()
{
    projectoryHeight = projectoryHeight + 5;
};

if (keyCode == 38)
{
    setHeight();
    console.log(projectoryHeight);
};

The code that relates to keycode for the up key being placed, is inside a rendering function, for use with requestAnimationFrame(). I feel like this may be what is causing the issue of it continuing to count however I have tried moving it outside of this function and nothing happens.

Javascript being used alongside THREE.js & Physi.js

More code to help with problem:

var render = function() {
            requestAnimationFrame(render);
            scene.simulate();

            let keyFlag = false;

            // Update the title page shape rotations
            sphere.rotation.y += 0.06;
            sphere.rotation.x += 0.10;
            sphere.rotation.z += 0.06;



            document.addEventListener("keydown", (e) => {
                if(e.code == 'KeyW'){
                $(title).hide();
                    $(keyTitle).hide();
                    scene.remove(sphere);
                    sphere.geometry.dispose();
                    sphere.material.dispose();

                    //add all the game functions here
                    scene.add(cube);
                    scene.add(firingBall);
                    scene.add(struct1);
                    scene.add(struct2);
                    scene.add(struct3);
                    scene.add(struct4);
                    scene.add(struct5);
                    scene.add(struct6);
                    scene.simulate();
                }
            });   

            document.addEventListener("keydown", (e) => {
                if(e.code == 'Space'){
                firingBall.setLinearVelocity(new THREE.Vector3(speedOfBall, projectoryHeight, 0));
                }                
            });

            document.addEventListener("keydown", (e) => {
                if(e.code == 'ArrowUp'){
                if (!keyFlag) {
                        keyFlag = true;
                        projectoryHeight = projectoryHeight + 5;
                        console.log(projectoryHeight);
                    }
                }                
            });

             document.addEventListener("keydown", (e) => {
                if(e.code == 'ArrowDown'){
                if (!keyFlag) {
                        keyFlag = true;
                        projectoryHeight = projectoryHeight - 5;
                        console.log(projectoryHeight);
                    }
                }                
            });

               document.addEventListener("keyup", (e) => {
                if(e.code == 'ArrowUp'){
                if (keyFlag){
                    console.log("stopped");
                    keyFlag = false;
                }
                }
            });

            document.addEventListener("keyup", (e) => {
                if(e.code == 'ArrowDown'){
                if (keyFlag){
                    console.log("stopped");
                    keyFlag = false;
                }
                }
            });


            renderer.autoClear = false;
            renderer.clear();
            renderer.render(backgroundScene, backgroundCamera);
            renderer.render(scene, camera);
        };

This is the function where keypresses etc are used, inside the render function. Also starts the animation frames and game physics.

This function is then called directly after it is declared

Thanks

Answer 1

You need to set a flag that tells you whether or not a key is being held down. To do this in simple form, you can use the keydown event in conjunction with the keyup event. In the following code the key can be held down but it only performs an action once based on the flag.

i.addEventListener("keydown", (e) => {
  if (!keyflag) console.log(e.key);
  keyflag = true;
});

i.addEventListener("keyup", (e) => {
  if (keyflag) console.log("released!");
  keyflag = false;
});

let i = document.querySelector("input"),
  keyflag = false;

i.addEventListener("keydown", (e) => {
  if (!keyflag) console.log(e.key);
  else e.preventDefault();
  keyflag = true;
});

i.addEventListener("keyup", (e) => {
  if (keyflag) console.log("released!");
  else e.preventDefault();
  keyflag = false;
});

<input>

Note inside the snippet I use e.preventDefault() to stop letters appearing in the input box. My intention was only that this would make it easier to see.