jQuery - Making sure user doesn't submit same value in text input twice in a row

Question

I'm creating a magic 8 ball app where the the user enters a question in an input box. They press the submit button and the answer replaces the default html text in a heading. If the same question is asked twice in a row I want to display an alert message instead of giving a new answer. I'm new to jQuery and I can't quite figure out how to store the last value entered. I would really appreciate some input. Thank you in advance.

$(document).ready(function(){
    var questionValue;
    $("#submit").click(function() {
        //Make sure user doesn't ask same question twice in a row
        if (questionValue != $("#submit").val()) {

            //List of possible responses
            var response = ["Ask again later…", "Yes", "No", "It appears so", "Reply is hazy, please try again", "Yes, definitely", "What is it you really want to know?", "Outlook is good", "My sources say no", "Signs point to yes", "Don't count on it", "Cannot predict now", "As I see it, yes", "Better not tell you now", "Concentrate and ask again"];

            //generate a random number between 0-14
            var randomNumber = Math.floor(Math.random() * 15);

            //Present random answer
            $("#eightBallAnswer").text(response[randomNumber]);
        }
        else {
            alert("Ask a different question");
        }
        var questionValue = $("#submit").val();
    });
});

Just by way of a little clean up: var randomNumber = Math.floor(Math.random() * response.length);; Don’t hard-code the length of the string. Also, define var response=[…] before the click() function. Otherwise you’re redefining the same array every time. — Manngo
– Manngo, Commented Mar 12, 2017 at 4:41

nnnnnn · Accepted Answer · 2017-03-12 04:37:09Z

3

Remove the var from the last line of your click handler function, because that is creating a local variable inside that function, and the value isn't retained between calls to the click handler. You want to be referring to the questionValue variable declared outside the click handler.

So change:

var questionValue = $("#submit").val();

...to:

questionValue = $("#submit").val();

EDIT: I just noticed that you are getting the value of an element with the id submit, the same element the click handler is bound to, which doesn't seem right. The button's value won't change between clicks. You don't show the HTML, so I'm not sure what the ID of the text box is, but you should double-check that selector in the if condition and on the line I've shown.

edited Mar 12, 2017 at 4:37

answered Mar 12, 2017 at 4:31

nnnnnn

150k30 gold badges210 silver badges247 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tanner Mann Over a year ago

Wow. Yeah I'm making all kinds of mistakes tonight. I appreciate your thoroughness with the edit. That explains why my life was so difficult for the last hour. Everything you said worked like a charm. Thank you.

CaptainHere · Accepted Answer · 2017-03-12 04:34:17Z

Im finding it hard to explain my changes haha

   $(document).ready(function(){
        var prevquestionValue=$("#input").val();
        $("#submit").click(function() {
            //Make sure user doesn't ask same question twice in a row
            if (prevquestionValue!= $("#input").val()) {

                //List of possible responses
                var response = ["Ask again later…", "Yes", "No", "It appears so", "Reply is hazy, please try again", "Yes, definitely", "What is it you really want to know?", "Outlook is good", "My sources say no", "Signs point to yes", "Don't count on it", "Cannot predict now", "As I see it, yes", "Better not tell you now", "Concentrate and ask again"];

                //generate a random number between 0-14
                var randomNumber = Math.floor(Math.random() * 15);

                //Present random answer
                $("#eightBallAnswer").text(response[randomNumber]);
            }
            else {
                alert("Ask a different question");
            }
            prevquestionValue = $("#input").val();
        });
    });

Collectives™ on Stack Overflow

jQuery - Making sure user doesn't submit same value in text input twice in a row

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related