JavaScript += неправильно увеличивается
У меня есть div, в который я пытаюсь добавить текст.
function fadeIn(divNum) {
let id = null;
fadeDiv = document.getElementById("jsTest");
fadeDiv.innerHTML = "";
console.info(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! that wasn't supposed to happen";
}
clearInterval(id);
id = setInterval(moveIt,100);
function moveIt() {
if (fadeDiv.style.opacity == 1) {
clearInterval(id);
} else {
fadeDiv.style.opacity += 0.1;
console.info(fadeDiv.style.opacity);
}
}
}<div style = "opacity: 0;" id = "jsTest"></div>
<button class = "boxButtonsb" onmouseover = "fadeIn(1)">JavaScript Test</button>Когда я навожу курсор, непрозрачность уменьшается только на .1 и выглядит так, будто она просто зацикливается навсегда. console.info показывает бесконечные 0.1 записи.
Но если я переверну это, то начальная непрозрачность равна 1, текст в div будет начинаться, и я установлю fadeIn на фактическое затухание, используя fadeDiv.style.opacity == 0 в качестве проверки оператора if для clearInterfal(id) и уменьшая fadeDiv.style.opacity через -= 0.1, это работает правильно.
Я понятия не имею, почему декремент работает правильно, а инкремент - нет.
Также связано с тем, почему декремент работает: stackoverflow.com/questions/24383788/…
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Атрибуты 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.info(fadeDiv.style.opacity);
}
HTMLELement::style содержит строковые значения, которые необходимо преобразовать в число с плавающей запятой:
function fadeIn(divNum) {
let id = null;
fadeDiv = document.getElementById("jsTest");
fadeDiv.innerHTML = "";
console.info(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! that wasn't supposed to happen";
}
clearInterval(id);
id = setInterval(moveIt,100);
function moveIt() {
if (fadeDiv.style.opacity == 1) {
clearInterval(id);
} else {
fadeDiv.style.opacity = +fadeDiv.style.opacity + .1;
console.info(fadeDiv.style.opacity);
}
}
}<div style = "opacity: 0;" id = "jsTest"></div>
<button class = "boxButtonsb" onmouseover = "fadeIn(1)">JavaScript Test</button>Алекс, все получилось, большое спасибо. Всем спасибо за объяснение, почему один работал, а другой нет, очень признателен!
@johncwelch Добро пожаловать, приятель
fadeDiv.style.opacity — это строка '0'.1', '0.1' + 0.1 дают строку '0.10.1', которая является неверным значением непрозрачности, поэтому она не установлена; с оператором «-» js сначала преобразует строку в число