Die unsachgemäße Verwendung des +=-Operators in JavaScript führt zu Inkrementierungsfehlern

Question

Ich habe ein Div, in das ich Text einblenden möchte.

function fadeIn(divNum) {
    let id = null;
    fadeDiv = document.getElementById("jsTest");
    fadeDiv.innerHTML = "";
    console.log(fadeDiv.style.opacity);
    if (divNum == 1) {
        fadeDiv.innerHTML = "Einige Texte";
    } else if (divNum == 2 ) {
        fadeDiv.innerHTML = "Ein anderer Text";
    } else if (divNum == 3) {
        fadeDiv.innerHTML = "Immer noch anderer Text";
    } anders {
        fadeDiv.innerHTML = „Ups! Das sollte nicht passieren“;
    }
    clearInterval(id);
    id = setInterval(moveIt,100);
    Funktion moveIt() {
        if (fadeDiv.style.opacity == 1) {
            clearInterval(id);
        } anders {
            fadeDiv.style.opacity += 0,1;
            console.log(fadeDiv.style.opacity);
        }
    }
}

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

Wenn ich den Mauszeiger bewege, verringert sich die Deckkraft nur um .1 und es sieht so aus, als würde sie sich dort ewig wiederholen. Das Konsolenprotokoll zeigt endlose 0.1-Einträge.

Wenn ich es jedoch umkehre, sodass die anfängliche Deckkraft 1 ist, befindet sich am Anfang Text, und ich setze fadeIn tatsächlich mit fadeDiv.style.opacity == 0 geprüft als if-Anweisung für clearInterfal(id) und dekrementiertfadeDiv.style.opacity< Code> und es wird gut funktionieren.

Ich habe absolut keine Ahnung, warum das Dekrementieren richtig ist, das Inkrementieren jedoch nicht.

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>