HTML/JS Попытка циклически переключать параметры шрифта на веб-сайте с помощью переключателя, но он не работает
У меня есть 6 различных вариантов шрифтов, и я создал кнопку в HTML для вызова функции по клику. Я нажимаю на него один раз, и изменение работает, но когда я нажимаю еще раз, оно ничего не делает. Определенно чего-то не хватает и я не могу понять, что именно.
function changeFont() {
var font = "Arial";
var fontNum = 1;
fontNum++;
switch (fontNum) {
case 1:
font = "Josefin Sans";
break;
case 2:
font = "Montserrat";
break;
case 3:
font = "Lora";
break;
case 4:
font = "Suse";
break;
case 5:
font = "Fenix";
break;
case 6:
font = "Courier Prime";
}
document.body.style.fontFamily = font;
if (fontNum >= 6) {
fontNum = 0;
}
}<input type = "button" id = "font-toggle" value = "Aa" onclick = "changeFont()" />Он меняется на Монтсеррат, но дальше ничего.
Любые рекомендации будут оценены по достоинству, спасибо.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Вы объявили var fontNum = 1 в событии клика, что означает, что его значение не сохраняется для следующего клика, поэтому при нажатии кнопки fontNum меняется с 1 на 2 => font каждый раз становится «Монтсеррат».
Уберите fontNum из функции, и все заработает.
ну, я чувствую себя дураком. Спасибо
Внесите некоторые изменения в соответствии с ним.
var fontNum = 0;
function changeFont() {
var font;
fontNum++;
switch (fontNum) {
case 1:
font = "Josefin Sans";
break;
case 2:
font = "Montserrat";
break;
case 3:
font = "Lora";
break;
case 4:
font = "Suse";
break;
case 5:
font = "Fenix";
break;
case 6:
font = "Courier Prime";
break;
default:
font = "Arial";
fontNum = 0; // Reset fontNum after the last case
}
document.body.style.fontFamily = font;
console.clear();
console.info(font);
}<input type = "button" id = "font-toggle" value = "Aa" onclick = "changeFont()" />Привет и добро пожаловать в SO. Пожалуйста, сначала просмотрите тур , а затем прочитайте Как спросить. Добавьте больше деталей в виде пояснения ваших изменений. По одному только коду трудно понять, какие изменения вы внесли. Особенно из-за того, что вы не форматировали код и текст, было очень трудно понять, как ваш ответ решит эту проблему. Я думаю, это также причина, по которой вас проголосовали против.
Хотя у вас уже есть ответ, я все же хочу дать вам еще один ответ, который решает проблему совершенно другим подходом.
Ваш код можно значительно упростить и изменить/устранить проблему.
Ваш код не очень абстрактный и его можно значительно упростить. Просто подайте иск на массив ваших шрифтов, а затем переключайтесь между массивами.
Чтобы перейти к началу массива, вы можете использовать fontNum = (fontNum + 1) % Fonts.length;. Это также будет работать при добавлении в массив дополнительных шрифтов. Больше не потребуется изменять код функции.
const Fonts = ['Arial', 'Josefin Sans', 'Montserrat', 'Lora', 'Suse', 'Fenix', 'Courier Prime'];
let fontNum = 0;
function changeFont() {
fontNum = (fontNum + 1) % Fonts.length;
document.body.style.fontFamily = Fonts[fontNum];
// shows current selected Font
console.clear()
console.info(Fonts[fontNum]);
}<input type = "button" id = "font-toggle" value = "Aa" onclick = "changeFont()" />
Вы устанавливаете
fontNum = 1при каждом щелчке, чтобы он всегда перемещался до 2, а при следующем щелчке вы повторно инициализируете его до 1, прежде чем снова установить его на 2. Вам нужно иметь эту переменную вне функции, чтобы она сохраняла свое значение от одного клика к другому