“如果"语句参数无法正常运行.的JavaScript [英] "if" statement parameters not functioning as intended. JavaScript

问题描述

以下JavaScript "if" 语句未按我打算同时读取两个参数的方式读取参数.当我使用使用间隔运行 bulletOneLeft ++的函数拍摄 bulletOne 时， bulletOne 的左侧CSS属性会按照预期的每个间隔增加1 .但是，当我编码以下 if 语句以检测 bulletOne 的CSS style.left属性并将其与名为" targetBox "；代码无法识别这两个元素的CSS style.left属性的区别.我的问题是，一旦bulletOne的CSS style.left属性在数值上大于targetBox的CSS style.left属性，我如何使此 if 语句执行?

The following JavaScript "if" statement is not reading the parameters as I intended both parameters to be read. When I shoot bulletOne with a function that uses an interval to run bulletOneLeft++; the left CSS property of bulletOne increases by 1 with each interval as intended. However, when I coded the following if statement to detect the CSS style.left property of the bulletOne and compare it to the CSS style.left property of an element called "targetBox"; the code does not recognize the difference of the CSS style.left properties of these two elements. My question is how can I make this if statement execute once bulletOne's CSS style.left property is greater than targetBox's CSS style.left property numerically?

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

bulletOneLeft 和 targetLeftProp 的两个参数用以下代码描述；

The two parameters of bulletOneLeft and targetLeftProp are described with the following code;

bulletOneLeft;

bulletOneLeft;

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

targetLeftProp;

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");

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

PREVIOUS FAILED ATTEMPT; I have tried many different combinations of code, the following was my first failed attempt. The following code seemed the most logical at the time;

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

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

推荐答案

所以首先您要打错字，这就是为什么它在失败的尝试中不起作用的原因.

So first of all you made a typo that is why it doesnt work in your failed attemps.

您的变量名为bulletOne，但是您可以使用bulletOneLeft进行if语句.

Your variable is named bulletOne but you do your if statement with bulletOneLeft.

也:

style.left;

返回一个字符串，因此，如果您确定它始终是一个整数，则必须使用parseFloat函数或parseInt( https://www.w3schools.com/jsref/jsref_parsefloat.asp ，

return a string, so you have to do use parseFloat function or parseInt if you're sure it will always be an int (https://www.w3schools.com/jsref/jsref_parsefloat.asp, https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/parseInt) as following :

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

我相信你很好.

这篇关于“如果"语句参数无法正常运行.的JavaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！