CODEWITHSUNDEEP
javascriptjqueryhtmlcss
VinPix
VinPix

Reputation: 53

Why doesn't jQuery function properly on keydown?

I have this external jQuery code:

jQuery(document).one('keydown', 'g',function (evt){
    if ($("#tb").html() == "0")
    {
        $("#tb").html("Testing the chicken.")
    } else {$("#tb").html("Chickens fart too.")}
return false;});

There are no errors in console.

I know it's rather silly, but never mind the text in .html(). Anyways, whenever I go to the webpage it just replaces the default 0 in the page with nothing. Then, when I press any key nothing happens. Ultimately, what I want this script to do in the end is display the letter or number that the user types in the tb div.

P.S. I'm new to stackoverflow so please tell me if my formatting is wrong or if I broke a rule.

Okay, so I edited the code and here is what I have:

$('#tb').on("keydown", function(event) {
    if ($("#tb").html() == "0")
    {
        $("#tb").html("Testing the chicken.")
    } else {$("#tb").html("Chickens fart too.")}
});

It still doesn't work.

Upvotes: 0

Views: 1470

Answers (1)

Sushanth --
Sushanth --

Reputation: 55740

A div element does not have a keydown event. Only element that have focus property can have it.

So I think you are referring to a input inside the div..

HTML

<div id="tb">
    <span class="output"></span>
    <input type="text" />
</div>

JS

// Delegating the event on input to it's container
$('#tb').on("keydown", 'input', function (event) {
    // $(this).val() - Gets the value of the input on keydown
    if ($(this).val() === "") {
        // Set the html for span inside div
        $(".output").html("Testing the chicken.");
    } else {
        $(".output").html("Chickens fart too.");
    }
});

Check Fiddle

// Bind event to the document which fires when document is focussed and 
// a key is pressed
$(document).on('keydown', function(event) {
    // Key code for g
    if(event.keyCode === 71) {
        // Bind the event to the input when g is pressed
        $('#tb input').on('keyup', inputKeydown);
        // unbind the event on document as no longet necessary
        $(document).off('keydown');
    }
    return;
});

function inputKeydown() {
    // $(this).val() - Gets the value of the input on keydown
    if ($(this).val() === "") {
        // Set the html for span inside div
        $(".output").html("Testing the chicken.");
    } else {
        $(".output").html("Chickens fart too.");
    }
}

Another Fiddle

Upvotes: 1

Related Questions