JavaScript中的+=操作符使用不当导致递增错误

Question

我有一个div，我试图将文本淡入其中。

function fadeIn(divNum) {
    let id = null;
    fadeDiv = document.getElementById("jsTest");
    fadeDiv.innerHTML = "";
    console.log(fadeDiv.style.opacity);
    if (divNum == 1) {
        fadeDiv.innerHTML = "一些文本";
    } else if (divNum == 2 ) {
        fadeDiv.innerHTML = "一些不同的文本";
    } else if (divNum == 3) {
        fadeDiv.innerHTML = "仍然不同的文本";
    } else {
        fadeDiv.innerHTML = "糟糕！这不应该发生";
    }
    clearInterval(id);
    id = setInterval(moveIt,100);
    function moveIt() {
        if (fadeDiv.style.opacity == 1) {
            clearInterval(id);
        } else {
            fadeDiv.style.opacity += 0.1;
            console.log(fadeDiv.style.opacity);
        }
    }
}

<div style="opacity: 0;" id="jsTest"></div>
<button class="boxButtonsb" onmouseover="fadeIn(1)">JavaScript测试</button>

当我鼠标悬停时，不透明度只减少了.1，看起来就像是永远循环在那里。控制台日志显示无尽的0.1条目。

但是，如果我反过来，所以初始不透明度为1，div中有文本开始，并且我设置fadeIn实际上是通过使用fadeDiv.style.opacity == 0作为clearInterfal(id)的if语句检查，并通过-= 0.1递减fadeDiv.style.opacity，它就能正常工作。

我完全不知道为什么递减是正确的，而递增不是。

Answer 1

CSS属性始终是字符串，而不是数字。你的代码执行了'0.1' + 0.1，结果是'0.10.1'，这不是一个有效的数字，所以可能被截断回到0.1。

改变它的一种方法是将结果解析为数字。

if (parseFloat(fadeDiv.style.opacity) == 1) {
            clearInterval(id);
        } else {
            fadeDiv.style.opacity = parseFloat(fadeDiv.style.opacity) + 0.1;
            console.log(fadeDiv.style.opacity);
        }

Answer 2

HTMLELement::style 包含字符串值，需要转换为浮点数：

function fadeIn(divNum) {
    let id = null;
    fadeDiv = document.getElementById("jsTest");
    fadeDiv.innerHTML = "";
    console.log(fadeDiv.style.opacity);
    if (divNum == 1) {
        fadeDiv.innerHTML = "一些文本";
    } else if (divNum == 2 ) {
        fadeDiv.innerHTML = "一些不同的文本";
    } else if (divNum == 3) {
        fadeDiv.innerHTML = "仍然不同的文本";
    } else {
        fadeDiv.innerHTML = "哎呀！这不应该发生的";
    }
    clearInterval(id);
    id = setInterval(moveIt,100);
    function moveIt() {
        if (fadeDiv.style.opacity == 1) {
            clearInterval(id);
        } else {
            fadeDiv.style.opacity = +fadeDiv.style.opacity + .1;
            console.log(fadeDiv.style.opacity);
        }
    }
}

<div style="opacity: 0;" id="jsTest"></div>
<button class="boxButtonsb" onmouseover="fadeIn(1)">JavaScript 测试</button>