Задать вопрос
DarrellStanding
@DarrellStanding
Учусь Front-end разработке
javascript

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

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

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

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

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

Другой вариант, добавить скрытый input, ему в onchange написать логику проверки значений, и передачу в нужный div: https://jsfiddle.net/orlov0562/yo7yj6vc/
Ответ написан
2 комментария
2 комментария
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
egoism
@egoism
Возможно через https://github.com/rikschennink/fitty
Ответ написан
Комментировать
Комментировать
Kianl
@Kianl
Печальный веб-разработчик
SetTimeout'ом такое отслеживать незачем.
Решение - максимально упростить вашу проверку и навесить на все кнопки.
Например, проверку можно обернуть в функцию, которая принимает sum.length и делает с ней все, что вам надо. Коротенький вызов потом распихать по кнопкам.
Еще можно веб-сокеты использовать, но это, мне кажется уже бред сумасшедшего будет совсем...

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

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
JavaScript Fullstack
OnClass
от 200 000 до 600 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Завершение разработки проекта на CS2
25 апр. 2024, в 20:02
100000 руб./за проект
Требуется завершить backend (проектная работа)
25 апр. 2024, в 19:42
49000 руб./за проект
Проверить тест по Data Science
25 апр. 2024, в 19:41
2000 руб./за проект
Ещё заказы