DarrellStanding
@DarrellStanding
Учусь Front-end разработке

Как следить за изменением количества цифр в блоке?

Есть блок в котором будет меняться сумма. Нужно отследить изменение в блоке, если число трехзначное, то изменить размер шрифта. Сумма в блоке будет меняться.

Пробовал через setTimeout() запускать проверку if(sum.length > 3) то менять размер, но все равно не срабатывает.

Есть вариант запускать проверку при нажатии на кнопку увеличивающую эту сумму, но тут нюансы. Есть куча кнопок удаляющие эту сумму или уменьшающие ее. Проверку прийдется вешать на все кнопки.

Есть ли другое решение подскажите.
  • Вопрос задан
  • 178 просмотров
Решения вопроса 2
orlov0562
@orlov0562
I'm cool!
Добавь событие изменение блока и запускай его, в местах изменения суммы, типа того: https://jsfiddle.net/orlov0562/nsay42ga/

Другой вариант, добавить скрытый input, ему в onchange написать логику проверки значений, и передачу в нужный div: https://jsfiddle.net/orlov0562/yo7yj6vc/
Ответ написан
Stalker_RED
@Stalker_RED
Для отслеживания изменений в DOM существует MutationObserver
var target = document.querySelector('#foo')

var observer = new MutationObserver(
  function(mutations) {
    mutations.forEach(function(mutation) {
      var size = 50 - target.textContent.length
      target.style.fontSize = size + 'px'
    });    
  }
);

observer.observe(target, { childList: true });
https://jsfiddle.net/6d869a3v/
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
Kianl
@Kianl
Печальный веб-разработчик
SetTimeout'ом такое отслеживать незачем.
Решение - максимально упростить вашу проверку и навесить на все кнопки.
Например, проверку можно обернуть в функцию, которая принимает sum.length и делает с ней все, что вам надо. Коротенький вызов потом распихать по кнопкам.
Еще можно веб-сокеты использовать, но это, мне кажется уже бред сумасшедшего будет совсем...

Лучший вариант - простейший вариант ©
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы