Почему эта функция у вас не работает должным образом?

Question

Я полагаю, что выкладываю здесь весь соответствующий код.

Функция определенно работает, потому что, если я переключаю > на <, она дает мне предупреждение, когда я нажимаю наКнопка 'moveup'.
Кроме того, консоль регистрирует, что pic2 продолжает расти с каждым шагом, а pic3 остается неизменным.Так что эта часть работает.

Что-то в функции просто неправильно сравнивает две переменные, и я не могу понять, что не так.

var player = document.getElementById("pic2").offsetLeft;
var finish = document.getElementById("pic3").offsetLeft;

console.log(player);
console.log(finish);

function youWin() {
  if (player >= finish) {
    alert("You Win!");
  } else {

  }
};

$(function() {
  $('#moveup').click(function() {
    $("#pic2").css('margin-left', '+=2vw');
    $("#pic3").css('margin-left', '-=2vw');
    document.getElementById("guessField").value = "";
    $('#myModalTrue').toggle();
    y = regenerate();
    var player = document.getElementById("pic2").offsetLeft;
    var finish = document.getElementById("pic3").offsetLeft;
    console.log(player);
    console.log(finish);
    youWin();
  });
});

Answer 1

Попробуйте записать значения внутри функции youWin, она должна вернуть старые значения и ваш ответ.Ваши значения player и finish не обновляются для функции.Он все еще получает старые значения.

function youWin(player, finish) {
  if (player >= finish) {
    alert("You Win!");
  } else {

  }
};

$(function() {
  $('#moveup').click(function() {
    $("#pic2").css('margin-left', '+=2vw');
    $("#pic3").css('margin-left', '-=2vw');
    document.getElementById("guessField").value = "";
    $('#myModalTrue').toggle();
    y = regenerate();
    var player = document.getElementById("pic2").offsetLeft;
    var finish = document.getElementById("pic3").offsetLeft;
    console.log(player);
    console.log(finish);
    youWin(player, finish);
  });
});

Answer 2

вы не меняете глобальные переменные player и finish.Вы делаете новые местные.для получения дополнительной информации о переменной области в javascript .попробуйте это

var player = document.getElementById("pic2").offsetLeft;
var finish = document.getElementById("pic3").offsetLeft;

console.log(player);
console.log(finish);

function youWin() {
  if (player >= finish) {
    alert("You Win!");
  } else {

  }
};
$(function() {
  $('#moveup').click(function() {
    $("#pic2").css('margin-left', '+=2vw');
    $("#pic3").css('margin-left', '-=2vw');
    document.getElementById("guessField").value = "";
    $('#myModalTrue').toggle();
    y = regenerate();
    player = document.getElementById("pic2").offsetLeft;//change is here
    finish = document.getElementById("pic3").offsetLeft;//and here
    console.log(player);
    console.log(finish);
    youWin();
  });
});