Здравствуйте!
Вы можете упростить поддержку и изменение внешнего вида вашего приложения, используя динамическое создание элементов и обработку событий. Таким образом, вам не нужно будет менять код для каждой кнопки вручную при изменении интерфейса. Вот несколько рекомендаций, как это можно сделать:
### 1. Используйте шаблонизацию
Вместо статического написания HTML-шаблонов для каждой кнопки, можно создать шаблон, который будет принимать параметры и динамически генерировать нужные элементы. Например:
```javascript
function createButton(id, text, room) {
const form = document.createElement('form');
form.id = id;
const button = document.createElement('button');
button.className = 'btn';
button.type = 'submit';
button.innerHTML = `<svg>...</svg>`; // Замените на необходимый SVG
const inputText = document.createElement('input');
inputText.type = 'hidden';
inputText.name = 'text';
inputText.value = text;
const inputAction = document.createElement('input');
inputAction.type = 'hidden';
inputAction.name = 'Action';
inputAction.value = 'Command';
const inputRoom = document.createElement('input');
inputRoom.type = 'hidden';
inputRoom.name = 'Room';
inputRoom.value = room;
form.appendChild(button);
form.appendChild(inputText);
form.appendChild(inputAction);
form.appendChild(inputRoom);
return form;
}
// пример использования
const container = document.querySelector('.col-4');
const newButton = createButton('aliceplaystop', 'Пауза', 'Детская');
container.appendChild(newButton);
```
### 2. Делегированное событие
Для обработки событий кнопок используйте делегированное событие. Это позволяет не привязывать отдельные обработчики к каждой кнопке, а обработать событие на уровне родительского элемента:
```javascript
document.querySelector('.col-4').addEventListener('submit', function(event) {
event.preventDefault(); // предотвратить отправку формы
const form = event.target;
const text = form.querySelector('input[name="text"]').value;
const action = form.querySelector('input[name="Action"]').value;
const room = form.querySelector('input[name="Room"]').value;
// отправьте данные на сервер через AJAX
console.log({ text, action, room });
});
```
### 3. Гибкое размещение элементов
Для изменения структуры элементов можно легко манипулировать DOM при помощи JavaScript. Например, при изменении интерфейса вы можете удалить старые элементы и создать новые, используя вышеупомянутую функцию `createButton`.
### 4. Используйте CSS классы для стилей
Если вы хотите изменить внешний вид кнопок, лучше всего организовать CSS-классы, которые будут описывать разные состояния и стили элементов. Это облегчит процесс стилизации:
```css
.btn {
/* общие стили для кнопок */
}
.btn.primary {
/* стили для кнопок с основным действием */
}
.btn.secondary {
/* стили для второстепенных кнопок */
}
```
Таким образом, подход с динамическим созданием элементов и обработкой событий упростит вам работу, сделает код более гибким и технически чистым. Вы сможете легко добавлять, изменять или удалять элементы, не беспокоясь о большой части кода.