Как добавлять элементу класс в зависимости от нажатой кнопки?

Question

[sunnyrio]

Есть 4 кнопки с классом btn и у каждой кнопки свой id, также есть отдельно input с id="wtch_name".
Нужно, чтобы при клике на какую-либо из кнопок этому input'у подставлялся class в зависимости от id кнопки.

Comments

[Шохрух Шаймардонов]

Залейте хоть код, или надеетесь, что Ванга догадается?

Answer 1

[0xD34F]

const input = document.querySelector('input');
const buttons = document.querySelectorAll('button');
buttons.forEach(n => n.addEventListener('click', onClick));

Можно сложить в массив информацию о том, какой класс какому id соответствует:

const classes = [
  [ 'id1', 'class1' ],
  [ 'id2', 'class2' ],
  [ 'id3', 'class3' ],
];

function onClick() {
  classes.forEach(n => input.classList.toggle(n[1], n[0] === this.id));
}

Или добавить кнопкам атрибут, который будет содержать имя класса (id кнопкам в этом случае уже не нужны):

<button data-class="class1">click me</button>
<button data-class="class2">click me</button>
<button data-class="class3">click me</button>

function onClick() {
  buttons.forEach(n => input.classList.toggle(n.dataset.class, n === this));
}

Comments

[sunnyrio]

благодарю