Improper use of the += operator in JavaScript leads to increment errors

Question

I have a div that I'm trying to fade text into.

function fadeIn(divNum) {
    let id = null;
    fadeDiv = document.getElementById("jsTest");
    fadeDiv.innerHTML = "";
    console.log(fadeDiv.style.opacity);
    if (divNum == 1) {
        fadeDiv.innerHTML = "Some text";
    } else if (divNum == 2 ) {
        fadeDiv.innerHTML = "Some different text";
    } else if (divNum == 3) {
        fadeDiv.innerHTML = "Still different text";
    } else {
        fadeDiv.innerHTML = "Oops! This shouldn't happen";
    }
    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 Test</button>

When I hover, the opacity only decreases by .1 and it looks like it's looping there forever. The console log shows endless 0.1 entries.

However, if I reverse it, so the initial opacity is 1, there is text starting in the div, and I set fadeIn actually by using fadeDiv.style.opacity == 0 checked as if statement for clearInterfal(id) and decrementedfadeDiv.style.opacity< by -= 0.1 ;/code> and it will work fine.

I have absolutely no idea why decrementing is correct but incrementing is not.

Answer 1

CSS properties are always strings, not numbers. Your code executes '0.1' 0.1, and the result is '0.10.1', which is not a valid number, so may be truncated back to 0.1 .

One way to change it is to parse the result as a number.

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 Contains string values ​​and needs to be converted to floating point numbers:

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>