Question

I’m creating this cool HTML Jeopardy game and I need a little coding help.
Right now im working just on the first question. Which pops up in an FancyBox.

I’m using an if to Identify the correct answer but it is not working.

I have the code:

$(document).ready(function() {
    var tag_100_input = $('#tag_100_ans').val();
    $('#tag_100_button').click(function() {
        if (tag_100_input == 'strong' || tag_100_input == 'b' || tag_100_input == '<strong>' || tag_100_input == '<b>') {
            $('.tag_100_correct').fadeIn(500);
            setTimeout("$.fancybox.close()", 3000);
            score += 100;
            $('#tag_100_not').css('display', 'none');
            $('#tag_100').css('display', 'none');
        }
        else {
            $('.tag_100_wrong').fadeIn(500);
            setTimeout("$.fancybox.close()", 3500);
            $('#tag_100_not').css('display', 'none');
            $('#tag_100').css('display', 'none');
        }
        $('.score').html(score);
    });
});

The jeopardy question is:
What tag can make text Bold?

Even when I enter one of the awnsers: b, strong, <b>, or <strong>
It shows me the wrong <span> instead of the correct one. Why is that?

Answer 1

$(document).ready(function() {
    var tag_100_input = $('#tag_100_ans').val();
    $('#tag_100_button').click(function() {

You’re retrieving the input with .val() as soon as the document loads. You don’t look at the input again later, so your code will only act on the default input values, not what you’ve actually entered.

You just need get the input value inside of your .click() callback instead, by swapping the second and third lines:

$(document).ready(function() {
    $('#tag_100_button').click(function() {
        var tag_100_input = $('#tag_100_ans').val();