Как выполнить код JS без перезагрузки страницы?
Подскажите пожалуйста, есть код JS, до ширины экрана в 480px выполняется один код, после 480px выполняться должен другой. Но без перезагрузки страницы код не выполняется, есть ли методы что-бы выполнить код без перезагрузки страницы? Заранее извиняюсь за тупой вопрос, в js я еще новичек и в интернете особо нечего не нашел(или плохо искал). Спасибо
const mainCircle = document.querySelector('.circle');
function circle3D() {
if (mainCircle) {
if (document.documentElement.clientWidth > 480) {
let radius = 180;
let countCircle = -1;
function generateLetters(selector, text, colorCircle) {
const letters = text.split('');
const step = 360 / letters.length;
countCircle = -1; // Сброс счетчика слов
letters.forEach((l, i) => {
const span = document.createElement('span');
changeColor(l, span, colorCircle);
const deg = step * i;
span.style.transform = transform(deg, radius);
selector.append(span);
});
}
function changeColor(l, span, colorCircle) {
if (l.toUpperCase() === l) ++countCircle; //Определяем новое слово по заглавной букве и увеличиваем счетчик слов
span.innerText = l.toUpperCase(); //В css к верхнему регистру не приводим делаем это здесь
span.style.color = colorCircle[countCircle]; //Присваиваем цвет
}
function transform(deg, radius = 180) {
return `rotateY(${deg}deg) translateZ(${radius}px)`;
}
let circle_1 = document.querySelector('.circle_1');
let content_1 = 'DevelopmentDevelopmentDevelopmentDevelopment';
let color_1 = ['#ccba96', '#161616', '#ccba96', '#161616'];
generateLetters(circle_1, content_1, color_1);
let circle_2 = document.querySelector('.circle_2');
let content_2 = 'DesignDesignDesignDesignDesign';
let color_2 = ['#ccba96', '#161616', '#ccba96', '#161616', '#ccba96'];
generateLetters(circle_2, content_2, color_2);
let circle_3 = document.querySelector('.circle_3');
let content_3 = 'MarketingMarketingMarketingMarketing';
let color_3 = ['#ccba96', '#161616', '#ccba96', '#161616'];
generateLetters(circle_3, content_3, color_3);
} else {
let radius = 140;
let countCircle = -1;
function generateLetters(selector, text, colorCircle) {
const letters = text.split('');
const step = 360 / letters.length;
countCircle = -1; // Сброс счетчика слов
letters.forEach((l, i) => {
const span = document.createElement('span');
changeColor(l, span, colorCircle);
const deg = step * i;
span.style.transform = transform(deg, radius);
selector.append(span);
});
}
function changeColor(l, span, colorCircle) {
if (l.toUpperCase() === l) ++countCircle; //Определяем новое слово по заглавной букве и увеличиваем счетчик слов
span.innerText = l.toUpperCase(); //В css к верхнему регистру не приводим делаем это здесь
span.style.color = colorCircle[countCircle]; //Присваиваем цвет
}
function transform(deg, radius = 140) {
return `rotateY(${deg}deg) translateZ(${radius}px)`;
}
let circle_1 = document.querySelector('.circle_1');
let content_1 = 'DevelopmentDevelopment';
let color_1 = ['#ccba96', '#161616'];
generateLetters(circle_1, content_1, color_1);
let circle_2 = document.querySelector('.circle_2');
let content_2 = 'DesignDesignDesign';
let color_2 = ['#ccba96', '#161616', '#ccba96'];
generateLetters(circle_2, content_2, color_2);
let circle_3 = document.querySelector('.circle_3');
let content_3 = 'MarketingMarketing';
let color_3 = ['#ccba96', '#161616'];
generateLetters(circle_3, content_3, color_3);
}
}
}
circle3D();
window.addEventListener('resize', circle3D)
Источник: Stack Overflow на русском