Не отрабатывает код который меняет размер кнопки в зависимости от разрешения экрана

@Thienrao · Регистрация: 01.11.2021

Студворк — интернет-сервис помощи студентам

Недавно Я начал изучать веб-разработку. Сверстал сайт, теперь изучаю JS и параллельно применяю его к своему проекту.
Проблема следующая: не срабатывает функция, которая меняет размер кнопки. Мною были написаны 3 модификатора и функция на JS, которая меняет их между собой в зависимости от разрешения.
HTML-код кнопки:

HTML5
1
2
3
4
5
6
7
8
9
<a href="" class="button footer__button button_blue button_medium-large">
    <span class="button__text">
        Start Today
    </span>
    <svg class="button__svg" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
        <path d="M1 8.38965H15" stroke-linecap="round" stroke-linejoin="round"/>
        <path d="M8 1.38965L15 8.38965L8 15.3896" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>                        
</a>

CSS-код модификаторов:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.button_regular-large {
    font-size: 18px;
    line-height: calc(30 / 18 * 100%);
    font-weight: 400;
}
.button_medium-small {
    font-size: 16px;
    font-weight: 500;
}
.button_medium-large {
    font-size: 18px;
    font-weight: 500;
    line-height: calc(23 / 18 * 100%);
}

Код функции на JS:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function applyModifiersButton() {
    let button = document.querySelector(".footer__button");
    let deviceWidth = window.innerWidth;
    
    button.classList.remove("button_medium-large", "button_medium-small","button_regular-large");
    
    if (deviceWidth <= 320) {
        button.classList.add("button_regular-large");
    } else if (deviceWidth <= 768) {
        button.classList.add("button_medium-small");
    } else {
        button.classList.add("button_medium-large");
    }
}
 
window.addEventListener('load', function() {
    applyModifiersButton();
})
 
window.addEventListener('resize', function() {
    applyModifiersButton();
})

Буду благодарен, если объясните, что не так и как это исправить. Спасибо за внимание!

krvsa · 30.07.2023, 21:59

Сообщение от Thienrao

не срабатывает функция

Бивас, тест! (с)

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
.button_regular-large {
    font-size: 18px;
    color: red;
}
.button_medium-small {
    font-size: 16px;
    color: blue;
}
.button_medium-large {
    font-size: 18px;
    color: green;
}
</style>
</head>
<body>
<a href="" class="footer__button">
    Test
</a>
   
<script>
function applyModifiersButton() {
    let button = document.querySelector(".footer__button");
    let deviceWidth = window.innerWidth;
    
    button.classList.remove("button_medium-large", "button_medium-small","button_regular-large");
    
    if (deviceWidth <= 320) {
        button.classList.add("button_regular-large");
    } else if (deviceWidth <= 768) {
        button.classList.add("button_medium-small");
    } else {
        button.classList.add("button_medium-large");
    }
}
 
window.addEventListener('load', applyModifiersButton)
 
window.addEventListener('resize', applyModifiersButton)
 
</script>
 
</body>
</html>

У меня все работает...

@mr_dramm · 30.07.2023, 22:43

Проблема может быть в кэше подключаемого js

кэш можно сбросить с помощью параметров поиска в url

HTML5
1
<script  src="path?v001></script>

и посмотрите ошибки в консоли devtools кнопка f12 в chrome

@Thienrao · 31.07.2023, 00:52 **[ТС]**

Сообщение от mr_dramm

кэш можно сбросить с помощью параметров поиска в url

Сделал, не помогло.

Сообщение от mr_dramm

и посмотрите ошибки в консоли devtools кнопка f12 в chrome

Посмотрел, была 1 ошибка с favicon, которую пофиксил. Это не помогло, но стало появляться данное предупреждение:
Ошибка карты кода: Error: request failed with status 404
URL ресурса: https://cdn.jsdelivr.net/npm/s... dle.min.js
URL карты кода: swiper-bundle.js.map
Я использовал swiper.js. Думал, проблема в нем, убрал код с ним, и исчезло данное предупреждение. Но это не повлияло на работу того js-скрипта.
Есть ещё это предупреждение:
Использование navigator.sendBeacon вместо синхронного XMLHttpRequest во время срабатывания unload и pagehide улучшит работу пользователя.

Добавлено через 52 секунды

Сообщение от krvsa

У меня все работает...

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

krvsa · 31.07.2023, 09:14

Сообщение от Thienrao

У меня работает таким путем, что сделали Вы, но у меня все разнесено по файлам.

Значит сами файлы неумело подключил или дело вообще не в этом... Т.е. пока ты сам не сделаешь тестовый пример на котором будет проявляться проблема - ты ее не решишь.

@Thienrao · 31.07.2023, 16:47 **[ТС]**

Сообщение от krvsa

Значит сами файлы неумело подключил или дело вообще не в этом...

Решил проблему. Как оказалось, у меня 2 кнопки с классом footer__button. Скрипт работал с первой попавшейся в html-коде. Поменял строчку:

JavaScript
1
let button = document.querySelector(".footer__button");

на:

JavaScript
1
let button = document.querySelectorAll(".footer__button")[1];

и скрипт работал с нужной кнопкой.

@mr_dramm · 31.07.2023, 17:53

Сообщение от Thienrao

Недавно Я начал изучать веб-разработку.

Возможно Вам пригодится информация о media query это типичное решение для того чтобы сделать страницу адаптивной к устройствам, js используется в случаях когда css недостаточно.

так мог бы выглядеть Ваш пример, стили расположены в порядке похожем на подход mobile first, сначала для экранов с наименьшей шириной и далее по увеличению

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html>
 
<head>
    <style>
    .footer__button {
        font-size: 18px;
        line-height: calc(30 / 18 * 100%);
        font-weight: 400;
    }
 
    @media(min-width: 321px) and (max-width: 768px) {
        /*   ширина экрана с 321px до 768px, max-width тут только для примера так как 
следующий блок @media (min-width: 769) действие этого блока и так перекроет  */
        .footer__button {
            font-size: 16px;
            font-weight: 500;
        }
    }
 
    @media (min-width: 769) {
        .footer__button {
            font-size: 18px;
            font-weight: 500;
            line-height: calc(23 / 18 * 100%);
        }
    }
    </style>
</head>
 
<body>
    <a href="" class="button footer__button">
        <span class="button__text">
            Start Today
        </span>
    </a>
</body>
 
</html>

Вопрое, такй код

JavaScript
1
document.querySelectorAll(".footer__button")[1]

трудно читаемый и трудно поддерживаемый, добавьте класс который подскажет функциональное назначение кнопки и сделает ее уникальной вприделах блока

JavaScript
1
document.querySelector(".footer .footer__button.feedback")

Новые блоги и статьи Все статьи Все блоги /
Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .
Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .	Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .