крестики-нолики без петли - JQuery

Question

У меня есть этот код, и я пытаюсь выяснить, почему мое утверждение if для победителя не работает.На данный момент я хочу проверить, только если первые три поля обозначены буквой «X», и если они должны объявить победителя.

let player1 = "X";
let player2 = "O";
let turn = "X";
let box1 = $('.box1').val();
let box2 = $('.box2').val();
let box3 = $('.box3').val();
let paragraph = $('p');

let everyBox = $('.everyBox');

everyBox.on('click', event => {
  if ($(event.currentTarget).attr('disabled')) {
    return;
  }

  if (turn == "X") {
    $(event.currentTarget).append(player1);
    turn = "O";
  } else {
    $(event.currentTarget).append(player2);
    turn = "X";
  }

  $(event.currentTarget).attr('disabled', true);

  myFunction();

});

function myFunction() {
  if (box1 == player1 && box2 == player1 && box3 == player1) {

    paragraph.text('player1 wins!').
  }

Answer 1

Ваши переменные box1, box2 и box3 не являются динамической ссылкой на значения.При назначении они являются значениями.

Вы можете исправить поведение сценария, переместив эти строки в myFunction функциональный блок:

let player1 = "X";
let player2 = "O";
let turn = "X";

let paragraph = $('p');

let everyBox = $('.everyBox');

everyBox.on('click', event=>{
    if ($(event.currentTarget).attr('disabled')) {
        return;
    }

    if(turn=="X"){
        $(event.currentTarget).append(player1);
        turn="O";
    }
    else{
        $(event.currentTarget).append(player2);
        turn="X";
    }

    $(event.currentTarget).attr('disabled', true);

    myFunction();

});

function myFunction(){
    let box1 = $('.box1').val();
    let box2 = $('.box2').val();
    let box3 = $('.box3').val();

    if(box1 == player1 && box2 == player1 && box3 == player1){
        paragraph.text('player1 wins!').
    }
}