Using Key Press to Rotate Messages - Jquery

Question

Using Key Press to Rotate Messages - Jquery

Need help with rotating an array based on alphanumeric key presses? Check out the code snippet I've been working on below. Unfortunately, I'm having trouble getting the loop to function properly. Any suggestions or feedback would be greatly appreciated!

Here's the array of rotating messages that I'm using:

var rotatingMessages = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten'];

$(document).ready(function() { 
  $(document).keypress(function(e){
    var code = e.KeyCode || e.which;
    var messages = (code-1) % 10;

    $("div#output").html(rotatingMessages[messages]);
  });
});

javascript jquery

Answer 1

Answer №1

If you want to implement a cycling array values feature, you can achieve this by utilizing the shift and push methods.

var rotatingItems = ['apple', 'banana', 'cherry', 'date', 'fig', 'grape', 'kiwi', 'lemon', 'mango', 'orange'];
$(document).ready(function () {
    $(document).keypress(function (e) {
        var item = rotatingItems.shift(); //get the first item from the array
        rotatingItems.push(item); //add it back at the end to cycle through
        $("#results").html(item);
    });
});

Code example on Fiddle

Answer 2

If you want to implement a cycling array values feature, you can achieve this by utilizing the shift and push methods.

var rotatingItems = ['apple', 'banana', 'cherry', 'date', 'fig', 'grape', 'kiwi', 'lemon', 'mango', 'orange'];
$(document).ready(function () {
    $(document).keypress(function (e) {
        var item = rotatingItems.shift(); //get the first item from the array
        rotatingItems.push(item); //add it back at the end to cycle through
        $("#results").html(item);
    });
});

Code example on Fiddle

Using Key Press to Rotate Messages - Jquery

Answer №1

Similar questions

"Enhance your PHP-MySQL data tables by implementing the Datatable Server Processing script using ssp.class.php

Controller encounters a error when requiring a module

What is the reason behind this HTML/CSS/jQuery code functioning exclusively in CodePen?

What is the reasoning behind CoffeeScript automatically adding a function when extending an Object?

Concealing the nearest object

Implementing ASP MVC3 - Utilizing partial views to dynamically add new HTML elements to the webpage

The resource was identified as a document but was sent using the MIME type application/json

Can you explain the distinctions among <Div>, <StyledDiv>, and <Box sx={...}> within the MUI framework?

Conflict in Vue.js between using the v-html directive and a function

Steps for referencing a custom JavaScript file instead of the default one:

Updating two separate <DIV> elements with a single AJAX request

Using the jquery-ui-daterangepicker to fetch date values within an MVC controller

Guide to importing firebase-functions and firebase-admin using ES6 syntax for transpilation with Babel in Node 10

JavaScript animation is not functioning as expected

Unable to trigger AJAX POST with jQuery click handler

How to retrieve the filename from a URL using Node.js

eliminate empty lines from csv files during the uploading process in Angular

Revolving mechanism within React.js

Tips for implementing a boundary on a multipart/form-data request when utilizing the jquery ajax FormData() function for handling several files

Facing continuous 404 errors while working with nodejs and express