[英]JavaScript if statement doesn't return true when it should
I have an input panel: 我有一个输入面板:
<div id="user_input">...</div>
I have a button: 我有一个按钮:
<input type="button" id="panel_button">...</button>
I have a selector: 我有一个选择器:
function $(id) {
return document.querySelector(id);
}
I have an event handler: 我有一个事件处理程序:
var button_panel = $('#panel_button');
button_panel.addEventListener('click', fadeUserInputPanel, false);
And finally I have 3 functions for fading in and out the input panel: 最后,我有3个用于淡入和淡出输入面板的功能:
var user_input_panel = $('#user_input');
user_input_panel.style.opacity = 1;
function fadeUserInputPanel()
{
if(user_input_panel.style.opacity == 1)
{
fade_out();
}
else if(user_input_panel.style.opacity == 0)
{
fade_in();
}
}
function fade_out()
{
if(user_input_panel.style.opacity > 0)
{
user_input_panel.style.opacity -= 0.1;
setTimeout(fade_out, 50);
}
}
function fade_in()
{
if(user_input_panel.style.opacity < 1)
{
user_input_panel.style.opacity += 0.1;
setTimeout(fade_in, 50);
}
}
The problem is the following: 问题如下:
When I load up the page, the input panel can be seen - since its opacity's value is 1. 当我加载页面时,可以看到输入面板-因为它的不透明度值为1。
Then I click on the panel_button , which starts to make the input panel fade out. 然后,我单击panel_button ,这开始使输入面板淡出。 It works just perfectly fine, so the opacity goes straight to 0 and the panel slowly disappears. 它工作得非常好,所以不透明度直接变为0,面板慢慢消失了。
But when I click on the panel_button again, it starts to make the input panel fade in, however it stops when the input panel's opacity is 0.1, and it does not go any further. 但是,当我再次单击panel_button时,它开始使输入面板淡入,但是当输入面板的不透明度为0.1时它停止,并且不再起作用 。
But according to the 'fade_in()' function - if the opacity is less than 1 - it should continue fading the panel in. Why doesn't it work? 但是根据'fade_in()'函数-如果不透明度小于1-它应该继续使面板褪色。为什么不起作用?
This happens because style.opacity
is not a number, but a string. 发生这种情况是因为style.opacity
不是数字,而是字符串。
> document.body.style.opacity = 0
0
> document.body.style.opacity
"0"
> document.body.style.opacity += 0.1
"00.1"
> document.body.style.opacity += 0.1
"0.10.1"
> document.body.style.opacity += 0.1
"0.10.1"
The subtraction for fade_out()
works OK, but only because the -=
operator doesn't have concatenation semantics and will always coerce the arguments to be numbers. 对fade_out()
的减法可以正常运行,但这仅是因为-=
运算符没有串联语义,并且始终将参数强制为数字。
To fix, manually coerce the opacity to a number: 要解决此问题,请手动将不透明度强制为数字:
function fade_in() {
var opacity = +user_input_panel.style.opacity;
if (opacity < 1) {
user_input_panel.style.opacity = opacity + 0.1;
setTimeout(fade_in, 50);
}
}
You can simply parseFloat on the opacity and it should be fixed. 您可以简单地对不透明度进行parseFloat,它应该是固定的。
function fade_in()
{
if(user_input_panel.style.opacity < 1)
{
user_input_panel.style.opacity = parseFloat(user_input_panel.style.opacity) + 0.1;
console.log(user_input_panel.style.opacity);
setTimeout(fade_in, 50);
}
}
Here is a working example: https://jsfiddle.net/bryanray/1c9oo5k5/ 这是一个工作示例: https : //jsfiddle.net/bryanray/1c9oo5k5/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.