Penggunaan operator += yang tidak betul dalam JavaScript membawa kepada ralat kenaikan

Question

Saya mempunyai div yang saya cuba pudarkan teks.

function fadeIn(divNum) {
    biarkan id = null;
    fadeDiv = document.getElementById("jsTest");
    fadeDiv.innerHTML = "";
    console.log(fadeDiv.style.opacity);
    jika (divNum == 1) {
        fadeDiv.innerHTML = "Sesetengah teks";
    } else if (divNum == 2 ) {
        fadeDiv.innerHTML = "Beberapa teks yang berbeza";
    } else if (divNum == 3) {
        fadeDiv.innerHTML = "Teks yang masih berbeza";
    } lain {
        fadeDiv.innerHTML = "Op! Ini tidak sepatutnya berlaku";
    }
    clearInterval(id);
    id = setInterval(moveIt,100);
    fungsi moveIt() {
        if (fadeDiv.style.opacity == 1) {
            clearInterval(id);
        } lain {
            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>

Apabila saya menuding, kelegapan hanya berkurangan sebanyak .1 Log konsol menunjukkan entri 0.1

Walau bagaimanapun, jika saya membalikkannya, jadi kelegapan awal ialah 1, terdapat teks dalam div bermula, dan saya menetapkan fadeIn sebenarnya dengan menggunakan fadeDiv.style.opacity == 0 ditandakan seolah-olah pernyataan untuk clearInterfal(id) kod> dan ia akan berfungsi dengan baik.

Saya sama sekali tidak tahu mengapa pengurangan adalah betul tetapi kenaikan adalah tidak.

Answer 1

Sifat CSS sentiasa rentetan, bukan nombor. Kod anda telah dilaksanakan '0.1' + 0.1，结果是'0.10.1'，这不是一个有效的数字，所以可能被截断回到0.1.

Salah satu cara untuk menukarnya ialah dengan menghuraikan hasilnya sebagai nombor.

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 mengandungi nilai rentetan dan perlu ditukar kepada nombor titik terapung:

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>