Javascript onkeypress event fires but input text value is incorrect

Question

I'm writing a simple javascript form that checks the input value against the value "blue". Now if you enter "blue", it says it's incorrect, but then if add any additional character, it says correct. It seems like there's a one-character delay, so when I enter "blue" it's only getting "blu". Here is the code:

<html>
<head>
<title>Favorite Color</title>
</head>

<body>
<h1>Quiz Time</h1>
<h2>What is your favorite color?</h2>

<p>Your Answer: <input type="text" id="txtinput" /></p>
<p id="message"></p>

<script type = "text/javascript">
function init() {
    var inp = document.getElementById("txtinput");
    inp.onkeypress=checkAnswer;

    checkAnswer();
}

onload = init;

function checkAnswer() {
    var text = document.getElementById("txtinput");
    var msg = document.getElementById("message");

    var sol = "blue";
    var ans = text.value;
    ans = ans.toLowerCase();

    if (ans.length <=0) {
        msg.innerHTML="<span style=\"color:blue;\">Enter Something.</span>";
    }
    else if (ans == sol) {
        msg.innerHTML="<span style=\"color:green;\">Correct!</span>";
    } else {
        msg.innerHTML="<span style=\"color:red;\">Wrong!</span>";
    }
}

</script>
</body>
</html>

score 6 · Accepted Answer · answered Feb 19 '12 at 13:33

6

Change the event to onkeyup instead of onkeypress

inp.onkeyup=checkAnswer;

answered Feb 19 '12 at 13:33

Dor Cohen

16,769
23
93
161

score 1 · Answer 2 · edited May 23 '17 at 12:33

1

Use the HTML5 input event with a fallback to the propertychange event in IE < 9. I've written about this many times on SO; here are two examples:

edited May 23 '17 at 12:33

Community

1
1

answered Feb 19 '12 at 14:50

Tim Down

318,141
75
454
536

Javascript onkeypress event fires but input text value is incorrect

2 Answers2

Linked