
- Javascript Basics Tutorial
- Javascript - Home
- Javascript - Overview
- Javascript - Syntax
- Javascript - Enabling
- Javascript - Placement
- Javascript - Variables
- Javascript - Operators
- Javascript - If...Else
- Javascript - Switch Case
- Javascript - While Loop
- Javascript - For Loop
- Javascript - For...in
- Javascript - Loop Control
- Javascript - Functions
- Javascript - Events
- Javascript - Cookies
- Javascript - Page Redirect
- Javascript - Dialog Boxes
- Javascript - Void Keyword
- Javascript - Page Printing
- JavaScript Objects
- Javascript - Objects
- Javascript - Number
- Javascript - Boolean
- Javascript - Strings
- Javascript - Arrays
- Javascript - Date
- Javascript - Math
- Javascript - RegExp
- Javascript - HTML DOM
- JavaScript Advanced
- Javascript - Error Handling
- Javascript - Validations
- Javascript - Animation
- Javascript - Multimedia
- Javascript - Debugging
- Javascript - Image Map
- Javascript - Browsers
- JavaScript Useful Resources
- Javascript - Questions And Answers
- Javascript - Quick Guide
- Javascript - Functions
- Javascript - Resources
JavaScript program to get a variable to count up/down on keyboard press.
Following is the code to increment or decrement a variable on keyboard up/down press in JavaScript −
Example
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>>Document</title> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .result { font-size: 20px; font-weight: 500; } </style> </head> <body> <h1>Changing variable value on keyboad up/down keypress</h1> <div style="color: green;" class="result"></div&g; <h3> Press up or down arrow key to increment/decrement variable </h3> <script> let dayVal = document.querySelector(".day"); let resEle = document.querySelector(".result"); let a = 0; resEle.innerHTML = a; document.body.addEventListener("keydown", (event) => { if (event.keyCode === 38) { resEle.innerHTML = ++a; } else if (event.keyCode === 40) { resEle.innerHTML = --a; } }); </script> </body> </html>
Output
The above code will produce the following output −
On pressing up arrow key a couple of times −
On pressing down arrow key a few times −
- Related Articles
- How to trigger a button click on keyboard "enter" with JavaScript?
- C++ Program to get string typed in different keyboard layout
- How to press a button without touching it on Tkinter?
- Program to count subsets that sum up to k in python
- How to change Tkinter label text on button press?
- How to Add Up/Down Bars to a Line Chart in Excel?
- What to press ctrl +f on a page in Selenium with python?
- What to press ctrl +c on a page in Selenium with python?
- How to Scroll Down or UP a Page in Selenium Webdriver?
- Program to count number of perfect squares are added up to form a number in C++
- How to hide a navigation menu on scroll down with CSS and JavaScript?
- How to unset a JavaScript variable?
- How to scroll up/down a page using Actions class in Selenium?
- Enter key press event in JavaScript?
- JavaScript Get English count number

Advertisements