Hey guys I'm trying to make bine click and keypress on my function, but nothing I've tried so far seems to work. This is my code:

function victoryMessage() {

    $(document).off("keyup", handleKeyUp);
    $('#feedback').append("Bravo!<br><br><div id='replay' class='button'>Nastavi</div>");


    $('#replay').on("click",function () {
        if(questionBank.length>3) {
            gameScreen();
        }
        else {
            finalPage();
        }
    });

    $(document).off("tap", keepFocus).trigger("tap");
}

so far I have tried following:

$("#replay").on("click keyup", function (e) {
    if (e.type == "click" || e.keyCode == 13) {
        if(questionBank.length>0) {
            gameScreen();
        }
        else {
            finalPage();
        }
    }
});

and

var callback = function() {
    if(questionBank.length>0) {
        gameScreen();
    }
    else {
        finalPage();
    }   
};

$("#replay").keypress(function() {
    if (event.which == 13) callback();
});

$('#replay').click(callback);

and

$(document).on("keypress", function(e){
    if (e.which == 13) {
        testKey();
    }
});

I have also tried some other things, but nothing seems to work. Here the link so you see my full code in action /TestingMobile/
EDIT: To clarify as Andy said I want the click to register when clicking only the the replay button, and the enter key to register when pressed anywhere within the document.

Hey guys I'm trying to make bine click and keypress on my function, but nothing I've tried so far seems to work. This is my code:

function victoryMessage() {

    $(document).off("keyup", handleKeyUp);
    $('#feedback').append("Bravo!<br><br><div id='replay' class='button'>Nastavi</div>");


    $('#replay').on("click",function () {
        if(questionBank.length>3) {
            gameScreen();
        }
        else {
            finalPage();
        }
    });

    $(document).off("tap", keepFocus).trigger("tap");
}

so far I have tried following:

$("#replay").on("click keyup", function (e) {
    if (e.type == "click" || e.keyCode == 13) {
        if(questionBank.length>0) {
            gameScreen();
        }
        else {
            finalPage();
        }
    }
});

and

var callback = function() {
    if(questionBank.length>0) {
        gameScreen();
    }
    else {
        finalPage();
    }   
};

$("#replay").keypress(function() {
    if (event.which == 13) callback();
});

$('#replay').click(callback);

and

$(document).on("keypress", function(e){
    if (e.which == 13) {
        testKey();
    }
});

I have also tried some other things, but nothing seems to work. Here the link so you see my full code in action http://www.wpacademy.nextweb.space/TestingMobile/
EDIT: To clarify as Andy said I want the click to register when clicking only the the replay button, and the enter key to register when pressed anywhere within the document.

• javascript
• jquery
• html
• css
• keyboard

3 Answers 3

From my tests you cannot keypress a button directly so a possible solution is the following

When the user presses enter anywhere on screen, replace alert with your function call.

$(document).keypress(function(e) {
    if(e.which == 13) {
        alert('You pressed enter!');
    }
});

$("#replay").on("click", function(){
  function call
});

Also to avoid having your code run in the keypress event all the time, you can check if a specific element is present on the screen like the replay button.

Hope that helps

I think this is what you're after. You want the click to register when clicking only the the replay button, and the enter key to register when pressed anywhere within the document.

$(document).on("click keypress", function (e) {      
  if (e.type === "click" && e.target && e.target.id === "replay") {
    e.preventDefault();  
    $("#output span").html("click happened");
  } else if (e.type === "keypress" && e.keyCode === 13) {   
    e.preventDefault();  
    $("#output span").html("enter key anywhere within document happened");
  }
});

#output {
  margin-top: 1em;
  padding: 0.5em 0.5em 0;
  border: 2px dashed gray;
  width: 300px;
  display: block;
  height: 50px;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="replay">replay button</button>
<div id="output">Event type: <span></span></div>

Since the element is created via JS, assign the click handler to document and defer it to #replay. And I'm not sure how you plan on capturing keyup on a div, but if you set contenteditable on the div, you can double click on the text, then type in it to show both events are being captured. Here's a codepen http://codepen.io/anon/pen/RpGEWK

$('#feedback').append("Bravo!<br><br><div id='replay' class='button' contenteditable>Nastavi</div>");
$(document).on("click keyup", "#replay", function(e) {
  console.log(e);
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="feedback"></div>