Answer to Question #302831 in HTML/JavaScript Web Application for chethan

Question #302831

Keyboard Events

The goal of this coding exam is to quickly get you off the ground with Keydown event

Use the below reference image

https://assets.ccbp.in/frontend/content/dynamic-webapps/keyboard-event-op.gif

Achieve the given functionality using JS

When the key is entered in the HTML input element with id userInput
The value in the HTML span element with id keydownCounter should be Incremented
The value in the HTML span element with id keydownCode should contain the key code of the latest key in the input element.

Expert's answer

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>Keyboard Events</h1>
  <label>Enter the value: <input id="userInput" type="text"></label>
  <p>keydown() fired: <span id="keydownCounter">0</span> times</p>
  <p>Recent keyCode: <span id="keydownCode">0</span></p>
  <script>
    var keydownCounter = document.getElementById("keydownCounter");
    var keydownCode = document.getElementById("keydownCode");
    var userInput = document.getElementById("userInput");
    userInput.addEventListener("keydown", function(event) {
      keydownCounter.textContent++;
      keydownCode.textContent = event.keyCode;
    })
  </script>
</body>
</html>

Learn more about our help with Assignments: Programming & Computer Science

Comments

No comments. Be the first!

Answer to Question #302831 in HTML/JavaScript Web Application for chethan

Comments

Leave a comment

Related Questions