“if”语句参数未按预期运行。 JavaScript

Question

以下 JavaScript "if" 语句没有读取参数，因为我打算读取两个参数。当我使用一个使用间隔运行 bulletOneLeft++; 的函数拍摄 bulletOne 时，bulletOne 的 left CSS 属性随着每个间隔按预期增加 1 .但是，当我编写以下 if 语句来检测 bulletOne 的 CSS style.left 属性并将其与名为“目标框";代码无法识别这两个元素的 CSS style.left 属性的区别。我的问题是，一旦 bulletOne 的 CSS style.left 属性在数值上大于 targetBox 的 CSS style.left 属性，我怎样才能让这个 if 语句执行？

if (bulletOneLeft > targetLeftProp){
document.getElementById("targetBox").style.opacity = "0";   
};

bulletOneLeft和targetLeftProp这两个参数用如下代码描述；

bulletOneLeft;

#bulletOne {
position: absolute;
background-color: white;
height: 1px;
width: 6px;
top: 0px;
left: 0px;
}
bulletOne.style.left = bulletOneLeft;

targetLeftProp;

#targetBox{
position: absolute;
background-color: green;
height: 20px;
width: 20px;
top: 30px;
left: 310px;
opacity: 1;
}
var targetLeftProp = window.getComputedStyle(CSSelement, 
null).getPropertyValue("left");

之前的尝试失败； 我尝试了许多不同的代码组合，以下是我第一次失败的尝试。以下代码在当时看来是最合乎逻辑的；

var bulletLeft = document.getElementById("bulletOne").style.left;
var targetLeft = document.getElementById("targetBox").style.left;

if (bulletOneLeft > targetLeft){
   document.getElementById("targetBox").style.opacity = "0";   
};

Answer 1

所以首先你犯了一个错字，这就是为什么它在你失败的尝试中不起作用。

您的变量名为 bulletOne，但您使用 bulletOneLeft 执行 if 语句。

还有：

style.left;

返回一个字符串，所以你必须使用 parseFloat 函数或 parseInt 如果你确定它总是一个 int (https://www.w3schools.com/jsref/jsref_parsefloat.asp, https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/parseInt) 如下：

var bulletOne = parseFloat(document.getElementById("bulletOne").style.left;

我相信你很高兴。