How

[Zhanbo372]

Классический (розовый) Золотой Зелёный

/* Общий стиль */
.invitation {
padding: 30px;
margin-top: 30px;
border-radius: 10px;
width: 400px;
margin-left: auto;
margin-right: auto;
}

/* Шаблон: Классический */
.template-classic {
background-color: white;
border: 2px solid #d16b86;
color: #d16b86;
}

/* Шаблон: Золотой */
.template-gold {
background-color: #fff8dc;
border: 2px solid #daa520;
color: #b8860b;
}

/* Шаблон: Зелёный */
.template-green {
background-color: #f0fff0;
border: 2px solid #228b22;
color: #2e8b57;
}

function generateInvitation() {
const names = document.getElementById("names").value;
const date = document.getElementById("date").value;
const location = document.getElementById("location").value;
const template = document.getElementById("templateSelect").value;

// Отображение текста
document.getElementById("namesDisplay").textContent = names;
document.getElementById("dateDisplay").textContent = Дата: ${date};
document.getElementById("locationDisplay").textContent = Место: ${location};

// Очистить старые классы
const invitation = document.getElementById("invitation");
invitation.className = "invitation";

// Применить выбранный шаблон
invitation.classList.add(template-${template});
invitation.classList.remove("hidden");

// Показать кнопку загрузки
document.getElementById("downloadBtn").classList.remove("hidden");
}

[Mycticount-X]

❗ Ошибки и исправления в JavaScript

1. Неверный синтаксис шаблонной строки

document.getElementById("dateDisplay").textContent = Дата: ${date};

❌ Это не работает, потому что вы не используете шаблонную строку (template literal) правильно.

✅ Нужно обернуть строку в обратные кавычки (`), вот так:

document.getElementById("dateDisplay").textContent = `Дата: ${date}`;

---

2. Неверный способ добавления класса по выбранному шаблону

invitation.classList.add(template-${template});

❌ Здесь используется недопустимый синтаксис.

✅ Вместо этого используйте шаблонную строку:

invitation.classList.add(`template-${template}`);