为什么这个功能 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();
  });
});

Answer 2

尝试在 youWin 函数中记录值，它应该 return 旧值和你的答案。您的 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);
  });
});

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

Why is this function youWin not working properly?

javascript

function

comparison-operators