Почему ценность того, что я прошу, не меняется?

Question

HTML:
<p id="Q1">1) Who is the chief justice of the Supreme Court? 

<input type="radio" name="CJ" value="C" class ="correct1">John Roberts
 <input type="radio" name="CJ" value="F" class ="correct1"> Neil Goursuch 
 <input type="radio" name="CJ" value="F" class ="correct1"> Ruth Bayder 
Ginsburg</p>

 <button class="btn btn-danger btn-lg">Done!</button>

        </div>

        <div id="results">

            <p>Correct Answers:<span id="CA"></span></p>

            <p>Incorrect Answers:<span id="IA"></span></p>

            <div id="P/F"></div>
        </div>

Javascript:

        var correctAnswer = 0;

        var wrongAnswer = 0;

        var unAnswered = 0;

        var answer1 = $( ".correct1" ).val();

    $("button").on("click", function(){
        console.log(answer1);
        if(answer1 == "C"){

            correctAnswer++;
            $("#CA").html(correctAnswer);
            console.log(correctAnswer);

        }
        else if (answer1 == "F"){

            $("#IA").html(wrongAnswer);
            wrongAnswer++;
            console.log(wrongAnswer);
        }

// Секция правильного ответа продолжает увеличиваться, когда я нажимаю кнопку, даже если я не нажимаю правильный ответ или даже когда я ничего не выбираю. Я не знаю, что происходит, даже если значения моих опций различаются для правильной и неправильной опций.

Answer 1

Вы выбираете значение checkbox при первой загрузке страницы, а затем используете это значение при каждом нажатии кнопки Done. Итак, при загрузке страницы:

// this returns the value for the first element with class correct1
// in this case that value happens to be the correct answer so on
// page load you've already "selected" the right answer that's why 
// consecutive clicks to done just increment the correct counter
var answer1 = $( ".correct1" ).val();
// answer1 = "C";

Чтобы исправить это, вы можете получать значение радиокнопки checked каждый раз, когда пользователь нажимает кнопку Done:

var correctAnswer = 0;
var wrongAnswer = 0;
var unAnswered = 0;

$("button").on("click", function() {
    // get the current checked radio button
    let answer1 = $('.correct1:checked').val();
    console.log(answer1);
    if(answer1 == "C"){

        correctAnswer++;
        $("#CA").html(correctAnswer);
        console.log(correctAnswer);

    }
    else if (answer1 == "F"){

        $("#IA").html(wrongAnswer);
        wrongAnswer++;
        console.log(wrongAnswer);
    }
});

Вот живая демонстрация:
https://www.bootply.com/90xDYoh3vL