Я делаю калькулятор с помощью Javascript и хочу создать кнопку, которая, если я нажму на нее, изменится весь стиль моего проекта, и если я нажму еще раз, весь стиль снова изменится, а при третьем нажатии он вернется к исходному стилю.
У меня нет идеи, как можно изменить весь стиль три раза с помощью одной кнопки?
🤔 А знаете ли вы, что...
С JavaScript можно создавать интерактивные формы и проверять введенные пользователем данные.
Вы можете создавать разные классы CSS и помещать их в массив. Каждый раз, когда вы нажимаете на кнопку, вы можете переключать стили, меняя индекс. Поскольку вы не предоставили никакого кода, вот пример.
let styleIndex = 0;
const styles = ['style1', 'style2', 'style3']; // styles array
function changeStyle() {
styleIndex = (styleIndex + 1) % styles.length;
document.body.className = styles[styleIndex];
}body.style1 {
background-color: white;
color: black;
}
body.style2 {
background-color: black;
color: white;
}
body.style3 {
background-color: blue;
color: yellow;
}
/* You can change the css classes depends on your choice and application */<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title>Calculator</title>
<link rel = "stylesheet" href = "styles.css">
</head>
<body class = "style1">
<button onclick = "changeStyle()">Click to change background color</button>
<script src = "script.js"></script>
</body>
</html>Вы можете использовать свойства/переменные CSS для определения различных стилей для ваших тем (таким образом вы сможете избежать определения стилей 3 раза для каждой темы для каждого класса, который у вас есть), а затем применить тему с переменной определения для корневого элемента, такого как ваше тело:
const btn = document.querySelector("#change-theme-btn");
let themeIdx = 0;
const themes = ["theme1", "theme2", "theme3"];
function setTheme() {
document.body.classList.remove(...themes);
const nextTheme = themes[themeIdx++ % themes.length];
document.body.classList.add(nextTheme);
}
btn.addEventListener("click", setTheme);
setTheme();.theme1 {
--primary-bg-color: yellow;
--primary-text-color: red;
}
.theme2 {
--primary-bg-color: black;
--primary-text-color: white;
}
.theme3 {
--primary-bg-color: cyan;
--primary-text-color: black;
}
body {
background-color: var(--primary-bg-color);
}
.text {
color: var(--primary-text-color);
}<p class = "text">Text</p>
<button id = "change-theme-btn">Change theme</button>Я бы предложил в этом случае использовать конструкцию переключателя для масштабирования и оптимизации кода. Этот подход может быть ненужным, если вы пишете простое решение, но я бы все равно использовал здесь «взрослое» решение.
Создайте массив для хранения различных стилей вашего приложения. Каждый стиль будет представлен объектом, где ключи — это CSS-свойства, а значения — их значения (также мы можем хранить здесь иконку, которая должна появляться при нажатии, или шрифты, в общем, дополнительные модификации):
const styles = [
{ backgroundColor: ‘white’, colour: ‘black’ }, // Initial style
{ backgroundColor: ‘black’, colour: ‘white’ }, // Second style
{ backgroundColor: ‘gray’, colour: ‘blue’ }, // Third style
];Используйте счетчик, чтобы отслеживать, сколько раз была нажата кнопка, и конструкцию переключателя, чтобы применить соответствующий стиль:
let counter = 0;
function changeStyle() {
const calculator = document.getElementById(‘calculator’); // Assume that your application has the id ‘calculator’
switch(counter) {
case 0:
Object.assign(calculator.style, styles[0]);
break;
case 1:
Object.assign(calculator.style, styles[1]);
break;
case 2:
Object.assign(calculator.style, styles[2]);
break;
}
counter = (counter + 1) % styles.length; // Increase the counter and reset it to 0 if it reaches the length of the styles array
}Ну и привяжем эту функцию к событию нажатия на кнопку:
<button onclick=‘changeStyle()’>Change Style</button>Сразу хочу сказать, что мое решение лишь дополняет ответ пользователя @nofoundname