Как назначать элементу классы в зависимости от его текстового содержимого?

Question

[oleg_ti]

Есть код:

<div class="result">
2.10
</div>

Нужен js код, который будет проверять число в этом диве. Если число в этом диве больше 2.00, то добавлять к диву класс .big, а если число меньше или равно 2.00 то добавлять к этому диву класс .small.

Answer 1

[Максим]

Вроде не сложно

Тут с проверкой, если вдруг содержимое не Число то удаляем(присваиваем class)

Answer 2

[Shurik]

Порядок действий примерно такой:
1. Получаем элемент, где содержится это число (document.querySelector или documetn.getElementById, например)
2. Получаем содержимое элемента - el.textContent
3. Приводим тип данных к числу - функция parseInt()
4. Сравниваем полученное число num с 2. В зависимости от результата добавляем нужный класс к элементу: el.classList.add(addedClass), где addedClass = num > 2 ? 'big' ? 'small'
5. Все это дело вешаем на обработчик события (например загрузка документа, клик и т.д.), в зависимости от того, что вам нужно

Comments

[Yagher]

Только нужно учитывать, что parseInt может вернуть NaN, которое тоже воспринимается js'ом как тип number.

[Максим]

Yagher, NAN это же вроде как "not a number" то есть "не число"

[Сергей delphinpro]

2.5 чистим строку от концевых пробелов. trim

[Yagher]

Максим с Казахстана, тем не менее, not a number - имеет числовой тип. Это такой способ указать, что данное число - не число, оставаясь в границах одного типа.