Проблема с изменением стиля в JavaScript-функции

Оффтоп javascript
1

Привет всем! У меня возникла проблема с JavaScript. Я написал две простые функции, но вторая не работает как надо. Вот мой код:

function changeText() {
  let checkbox = document.getElementById('capsCheck');
  let textElement = document.getElementById('displayText');
  textElement.textContent = checkbox.checked ? 'ПРИВЕТ МИР!' : 'привет мир!';
}

function changeBold() {
  let checkbox = document.getElementById('boldCheck');
  let textElement = document.getElementById('displayText');
  textElement.style.fontWeight = checkbox.checked ? 'bold' : 'normal';
}

Первая функция отлично меняет текст, а вот вторая почему-то не влияет на жирность шрифта. Я пробовал разные варианты, но ничего не помогает. Может, это проблема браузера? Кто-нибудь сталкивался с подобным? Буду благодарен за любую помощь!

2

Может проблема в том, что стиль не применяется сразу? Попробуй добавить небольшую задержку:

setTimeout(() => {
textElement.style.fontWeight = checkbox.checked ? ‘bold’ : ‘normal’;
}, 50);

Еще вариант - использовать requestAnimationFrame вместо прямого изменения стиля. Так браузер сможет оптимизировать отрисовку:

requestAnimationFrame(() => {
textElement.style.fontWeight = checkbox.checked ? ‘bold’ : ‘normal’;
});

3

да, тут может быть несколько причин. я бы посоветовал проверить, правильно ли подключен js-файл к html. иногда бывает, что скрипт не загружается или загружается не полностью. еще можно попробовать использовать addEventListener вместо прямого присваивания onclick. например:

document.getElementById(‘boldCheck’).addEventListener(‘change’, changeBold);

это часто решает проблемы с обработкой событий. если не поможет, можно попробовать менять класс элемента вместо прямого изменения стиля. так обычно надежнее работает:

textElement.classList.toggle(‘bold-text’);

4

Твой код вроде правильный, но есть пара моментов. Проверь, точно ли у тебя есть элемент с id ‘displayText’. Еще бывает, что стили перебиваются CSS. Попробуй добавить !important к fontWeight, типа:

textElement.style.fontWeight = checkbox.checked ? ‘bold !important’ : ‘normal !important’;

Если не поможет, глянь в консоль браузера - там могут быть ошибки. А вообще, для таких штук я обычно использую classList.toggle(), так проще управлять стилями.