javascript - 为什么youWin这个功能不能正常工作？

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

您没有更改全局 player 和 finish 变量。你正在制作新的本地产品。有关 variable scope in 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();
  });
});