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遞減fadeDiv.style.opacity<.opacity< ;/code>，它就能正常運作。

我完全不知道為什麼遞減是正確的，而遞增不是。

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>