Текст кнопки не меняется с помощью JS

Question

Текст кнопки не меняется с помощью JS

Рейтинг: -1Ответов: 1Опубликовано: 23.03.2023

У меня есть кнопка. Мне надо, чтобы при ширине экрана меньше 340px, текст кнопки менялся. Я попытался написать скрипт, но он не работает. Вот ссылка на codepen. Код:

if (document.documentElement.clientWidth < 340) {
  function () {
    document.getElementById('button').innerHTML = 'Поменять текст'
  }
}

<div>
  <button id='button'>Отправить</button>
</div>

javascript html

Источник: Stack Overflow на русском

Answer 1

▲ 3Принят

Даже если бы Ваш код не выдавал ошибки он все равно бы не работал так как написан не корректно с точки зрения языка JS. То что Вы поместили функцию в условие еще не значит что она выполнится. Нужно явно делать вызов функции и давать ей имя, есть случаи когда имя не обязательно, но это не тот случай. Хотя и не запрещено объявлять функцию везде где хочется лучше объявлять ее вне условий на глобальном уровне.

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

const mediaQuery = "screen and (max-width: 340px)"
const updateStyles = () => {
  const isMax340 = matchMedia(mediaQuery).matches   
  matchMedia(mediaQuery).addEventListener("change", updateStyles, 
   { 
     once: true 
     /* эта опция делает автоматическую отписку 
     от события после срабатывания — нет утечки памяти */
   })
  if (isMax340){
      document.getElementById('button').textContent = 'Поменять текст'
  } else {
      document.getElementById('button').textContent = 'Отправить'
  }
}
updateStyles(); // инициализация

<div>
  <button id='button'>Отправить</button>
</div>

Решение основано на отслеживании изменений странице приводящих к активации различных media query в данном случае js позволяет нам отслеживать подобные изменения и проверять на то активировался или деактивировался конкретный запрос "screen and (max-width: 340px)" тут можно использовать любой валидный запрос, таким образом это решение максимально гибкое и универсальное. Надеюсь оно Вам подойдет.

Если Вам по какой-то причине не нужно такое сложное решение то я предлагаю посмотреть как переписать Ваше решение корректно:

function changeCaption(text) {
   document.getElementById('button').textContent = text
}

if (document.documentElement.clientWidth < 340) {
   changeCaption('Поменять текст')
} else {
   changeCaption('Отправить')
}

Но стот заметить что такой код отработает 1 раз и не будет отслеживать изменений размера окна, например при развороте экрана и т.п.

Текст кнопки не меняется с помощью JS

Ответы