CODEWITHSUNDEEP
jquerykeypress
riotgear
riotgear

Reputation: 555

on keypress jquery issues

I am trying to make a little sample dropdown appear when a user enters a certain combination of letters in the form. I think I am having syntax/logic problems because I can't even get the alerts to work.

$(document).ready(function () {

   $("#inputt").keypress(

    function(event) {

        if (event.which == melee || MELEE) {

            alert("You typed MELEE");

        } else if (event.which == knuckle || KNUCKLE) {

            alert("You typed KNUCKLE");

        } else {

            alert("Neither!!!");
            $('.knuckle').hide();
            $('.melee').hide();

        }

   });

});

Here is the sample. https://jsfiddle.net/galnova/snp1hqr7/1/

Upvotes: 0

Views: 80

Answers (2)

Naruto
Naruto

Reputation: 4329

So you have error in your code as there is no such event.which, if you see your console of developer mode, you can see error. So it must be either compairing the value of textbox by using $("#inputt").val() with the value 'melee'. It will do the trick

 if (event.which == melee || MELEE) {

must be replaced by

 if ($("#inputt").val() == 'melee'||  $("#inputt").val() =='MELEE') {

and subsequently for

else if (event.which == knuckle || KNUCKLE)

with 

else if ($("#inputt").val() == 'knuckle' || $("#inputt").val() ==KNUCKLE)

https://jsfiddle.net/aadi/2odkq3t8/

Edit :- Also event you are using is keypress so it will be fired if text you have written is greater than melee and type another charatcer then it would be fired . It would be better if you use keyup event which is triggered when any key is released after pressing.

Upvotes: 1

devlin carnate
devlin carnate

Reputation: 8592

There are a few problems with your code.

  • Your code is throwing the error melee is not defined. You're looking for a string value, so melee needs to be in quotes.
  • event.which returns an integer, not a string.
  • I'm not entirely sure you want to tie your event to keypress... because that means it runs with every key stroke. If you're looking for a specific word, you might want to bind to the change event instead. Or, at a minimum, get rid of the alert on every keypress because it's annoying. In my example, I'm using change, which requires the user to press enter after typing the word.
  • What if someone types Melee? Your code is only looking for two instances of the word, but there are a lot of others you might want to account for. One way to handle this is to put the value in lower case and then you only need to compare against melee.

Here is an updated fiddle

   $("#inputt").change(

    function() {

        if ($(this).val().toLowerCase() === "melee") {

            alert("You typed MELEE");

        } else if ($(this).val().toLowerCase() === "knuckle") {

            alert("You typed KNUCKLE");

        } else {

            alert("Neither!!!");
            $('.knuckle').hide();
            $('.melee').hide();

        }

   });

Upvotes: 1

Related Questions