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

Question

[Игорь]

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

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

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

Есть ли другое решение подскажите.

Comments

[Aligatro]

А сумма меняется то от чего, внесенные данные в поля формы?

[Игорь]

Aligatro: Например жмешь добавить товар в корзину и сумма в корзине меняется.

Answer 1

[Vitaliy Orlov]

Добавь событие изменение блока и запускай его, в местах изменения суммы, типа того: https://jsfiddle.net/orlov0562/nsay42ga/

Другой вариант, добавить скрытый input, ему в onchange написать логику проверки значений, и передачу в нужный div: https://jsfiddle.net/orlov0562/yo7yj6vc/

Comments

[Игорь]

Круто!!!!! Спасибо большое!!

[Stalker_RED]

Игорь: При этом оба варианта не следят за изменениями в блоке ☺

Answer 2

[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/

Answer 3

[Кирилл Бакулин]

Возможно через https://github.com/rikschennink/fitty

Answer 4

[Сергей]

SetTimeout'ом такое отслеживать незачем.
Решение - максимально упростить вашу проверку и навесить на все кнопки.
Например, проверку можно обернуть в функцию, которая принимает sum.length и делает с ней все, что вам надо. Коротенький вызов потом распихать по кнопкам.
Еще можно веб-сокеты использовать, но это, мне кажется уже бред сумасшедшего будет совсем...

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

Comments

[Игорь]

Сори затупил. не Timeout - м, а интервалом. Каждую секунду проверку делает.

Таймаут будет сильно нагружать сайт или просто не лучший вариант решения?

[Сергей]

Интервалами и таймаутами проверки это всегда криво, я думаю.

[Stalker_RED]

Сергей: А вебсокетами, это как?