0

I have seen many questions asked about ': focus', but have not seen many helpful answers with context to text-based games or using inside of an if statement. I wanted to be sure what I was writing was correct, and I don't get any errors from my code, I just simply don't get a return. I want to code this game very badly, but sadly can't start until I get past this hump! Thanks for the help in advance!!

I also found this question, https://https://stackoverflow.com/questions/967096/using-jquery-to-test-if-an-input-has-focus?rq=1. It asked and it looks like I followed what the answer says, but the error code still points to something being off on that line of code.

This is my HTML doc, but I'm almost positive there isn't anything wrong here.

        <!DOCTYPE HTML>
        <head>
           <title>Zork!!</title>
        </head>
       <body>
       <div id = "game text"><p>Welcome to Zork!!</div>
       <input id = "user-input" placeholder="Please type your command.."></input>

       <script type="text/javascript" src="jquery-3.4.1.min.js"></script>

       <script type="text/javascript" src="script.js"></script>
       </body>

This is the original 'script.js' I had before changing to the answer:

         $(document).ready(function(){
         $(document).keypress(function(key){


        if(key.which === 13 && $("user-input").is("*:focus")){
            //I also used "input: focus" and got the same error code
            var value = $("user-input").val();

            alert(value);
             }
           })   
         })

With what I have, I THOUGHT I would be able to type words into the input box hit enter, and get a text box saying back to me whatever I typed in.

error code :

jquery-3.4.1.min.js:2 Uncaught Error: Syntax error, unrecognized expression: 
: focus
at Function.se.error (jquery-3.4.1.min.js:2)
at se.tokenize (jquery-3.4.1.min.js:2)
at se.compile (jquery-3.4.1.min.js:2)
at se.select (jquery-3.4.1.min.js:2)
at se (jquery-3.4.1.min.js:2)
at Function.se.matchesSelector (jquery-3.4.1.min.js:2)
at Function.k.filter (jquery-3.4.1.min.js:2)
at j (jquery-3.4.1.min.js:2)
at k.fn.init.is (jquery-3.4.1.min.js:2)
at HTMLDocument.<anonymous> (script.js:7)
//This is the line pointing to the :focus issue I was having

Thank you Amit and Ibrahim!

Stephen Woodbury
  • 1
  • 3
  • 4
    Your `` has the invalid id attribute value "user input", with a space. The jQuery code looks for `"user-input"`. – Pointy Apr 05 '20 at 19:18
  • @Pointy I changed it back to "user input" like you said and took off the hashtags. Do you know what's wrong with using focus the way I did? Whenever I take that part of the code out, the HTML works fine and whenever I press enter it returns 'undefined' since there isn't any focus drawn to what should be returned. – Stephen Woodbury Apr 05 '20 at 19:49
  • No no, you misunderstood. The id of the element needs to be "user-input". Spaces are not allowed in id attribute values. – Pointy Apr 05 '20 at 19:50
  • Also your jQuery selector should be something like `"*:focus"` or `"input:focus"` – Pointy Apr 05 '20 at 19:56
  • @Pointy Thanks for the clarification on the first part! I tried both of your focus selectors and I'm still getting the same error code. Am I supposed to be putting them like .is("*focus")? – Stephen Woodbury Apr 05 '20 at 20:09

1 Answers1

1

  1. Use this code in your script.js file.

    $("#user-input").keypress(function(key){
    if(key.which === 13 && $('#user-input').is(':focus')){
        var value = $('#user-input').val();
        alert(value);
    }
}) ;
Ibrahim Khan
  • 20,616
  • 7
  • 42
  • 55
Amit Kumar
  • 177
  • 4