Creating a JavaScript function that increments or decrements a variable based on keyboard input is a useful feature

My goal is to have a count start at 100 and then either count up or down by 1 when a specific keyboard button is pressed. Currently, I am using the keys 8 and 2 on the keypad, which represent ascii numbers 104 and 98.

So far, the code I have only allows for counting down, but I am unable to make it count up when key 104 is pressed.

I'm wondering what I am missing in my code to achieve this.

var keyY = 100;

document.addEventListener('keydown', function(event){
  var keyPressed = event.keyCode;
  switch(keyPressed){
    case 104:
      keyY = keyY + 1;
    case 98:
      keyY = keyY - 1;
  }
  console.log('key pressed: ' + keyPressed);
  console.log('keyX = ' + keyY);
});
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </head>
  <body>
      <script src="index.js"></script>
  </body>
</html>

Answer №1

Remember to include the break statement in your code, as it plays a crucial role in controlling the flow of your program.

The break statement linked to each case label in a switch ensures that the program exits the switch structure after executing the matching statement, and resumes execution at the statement following the switch. Omitting the break statement will cause the program to continue executing the subsequent statements in the switch structure.

Source: here

var keyY = 100;

document.addEventListener('keydown', function(event){
  var keyPressed = event.keyCode;
  switch(keyPressed){
    case 104:
      keyY++;
    break;
    case 98:
      keyY--;
    break;
  }
  console.log('key pressed: ' + keyPressed);
  console.log('keyX = ' + keyY);
});

EDIT: use keyY++; instead of keyY = keyY + 1; & keyY--; instead of keyY = keyY - 1;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for sending parameters in onClick within a React Functional Component

In my ReactJS Functional Component, I need to pass a few values when a button is clicked. The code snippet for this functionality is below: <span className="edit" onClick={ onClickEdit(value.title, value.details)}> <img src={editImg} height=" ...

Error encountered while retrieving data from Firebase and storing it in an array within an IONIC application

I am currently working on a function that retrieves data from Firebase's real-time database and stores it in an array for mapping in React. However, I am encountering a TypeScript error that I'm having trouble resolving. The error message reads ...

Adding elements to an array within a JSON object in Angular: What you need to know

Within my json object named "flowComponents," there is a string called "name" and an array of strings labeled "edition." As an example: { "_id": "553e87f3205465e83b46999b", "name": "FLOWCOMPONENT_CONTACTCOMBINATION_EDITION", "__v": 0, "edition ...

How do we handle the reception of document.form.submit() in the code behind?

I have a JavaScript function document.form1.submit() and I am wondering how to receive it in the code behind. In which class and method should I be looking? I need to get the value from a textbox and store it in session, but I'm not sure if I need an ...

Enhancing the Appearance of Legends in Chartjs

I'm attempting to customize the legend in my Chartjs chart, but I'm facing an issue where I can't seem to change the font color. What I want to achieve is having the font color in white while keeping the individual item colors intact in the ...

I am feeling quite lost in trying to figure out how to create a voice mute command using Discord

I've been searching for information on how to create a command that mutes only one specific person I tag in chat, but I'm having trouble finding any guidance on it. As someone new to discord and node js, I could really use some assistance. Mute ...

"Implementing AngularJS bidirectional data binding to dynamically link user inputs with corresponding fields

Having trouble automatically outputting data with angularJS. One of the great features of angular is two-way data binding, but I can't seem to bind input with a JSON file. What I want to achieve is if the user's input matches a key, the correspon ...

What is the best way to push a variable after employing the split function in JavaScript?

error: An unexpected TypeError occurred while trying to read property 'push'. The error was on this line: " this.name[i].push(arrayData[0]); " I'm confused because the console.log statement before that line shows "data is loaded:" alo ...

Unable to retrieve props from server-side page to client-side component in a Next.js application router

Currently, I am utilizing app router alongside Next.js version 13.5. Within my /dashboard page (which is a server component), there is an ApiKeyOptions client component embedded. However, when attempting to pass props from the dashboard page to the ApiKeyO ...

Arranging nested arrays

There is a nested list provided with the following markup (which cannot be altered currently). My goal is to sort this list and all nested lists by the title of the 'a' tag. The initial div (not nested in 'li') should be used for sortin ...

Having trouble with prettyphoto functionality

Seeking assistance as I am struggling to get this working Here is how I have set it up: <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script> <link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen"/ ...

Ways to expose an object in a Node module

One of my modules relies on a parsing functionality, with other modules needing to query the values provided by this parser. I have some key questions regarding its design: How should I approach building it in terms of design aspects? Which method should ...

Comparing Mongoose and MongoDB in Node.js: Weighing the Benefits of Each

Just starting out with Node.js and noticing the multitude of libraries available to work with MongoDB. The two most popular options appear to be mongoose and mongodb. Can someone provide a comparison of the pros and cons of these extensions? Are there any ...

Is it possible to merge string and span elements to create a unified element?

In my current project using React, I am dealing with an array of strings and JSX Elements. For instance, the array has items like: [<span class="name">JCrew0</span>, "edited this document"]. I am attempting to display thes ...

Is Formik Compatible with TextareaAutosize?

I've implemented react-textarea-autosize and formik in my project, but I'm having trouble connecting the change events of formik to TextareaAutosize. Can anyone guide me on how to do this properly? <Formik initialValues={{ ...

Using dropzone.js on multiple files in a single webpage

Is it feasible to incorporate multiple dropzone elements on one webpage instead of having numerous file uploads on a single dropzone element? It appears that dropzone fails to trigger after the selection dialog box when there are several elements, each wi ...

Retrieve the bounding rectangle of a div that has the CSS style `display: contents` using the getBoundingClientRect

My objective is to apply styling and obtain the bounding box of an entire "row" within a CSS grid, including features like highlighting when hovering over it. To achieve the styling aspect, I make use of the display: contents property, so that the styles ...

Every checkbox has been selected based on the @input value

My component has an @Input that I want to use to create an input and checkbox. import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; @Component({ selector: 'app-aside', templateUrl: './aside.component ...

Export was not discovered, yet the names are still effective

There seems to be a slight issue that I can't quite figure out at the moment... In my Vue project, I have a file that exports keycodes in two different formats: one for constants (allCodes) and another for Vue (keyCodes): export default { allCodes ...

Top method for triggering an action on the client-side during Sign In with the help of Redux, React, and NextAuth

Currently, I am developing a web application that utilizes the Spotify API. My goal is to seamlessly load the user's playlists as soon as they log in using NextAuth. At the moment, there is a button implemented to trigger playlist loading, but it onl ...