Функция для кнопок

79
05 марта 2022, 13:10

Подскажите пожалуйста, как сделать функцию, для одной кнопки, что бы при нажатие на нее, нажимались все, кнопок более 15, с разными id.

Answer 1

Нужно выбрать группу кнопок и у каждой вызвать метод click()

const groups = document.querySelectorAll('.group'); 
for (let i = 0; i < groups.length; i++) { 
  groups[i].addEventListener('click', function() { 
    console.log(this.innerHTML); 
  }); 
} 
 
document.getElementById('all').addEventListener('click', function() { 
  console.log('All click'); 
  const groups = document.querySelectorAll('.group'); 
  for (let i = 0; i < groups.length; i++) { 
    groups[i].click(); 
  } 
});
<button id="all">All</button><br/> 
<button class="group">1</button> 
<button class="group">2</button> 
<button class="group">3</button> 
<button class="group">4</button> 
<button class="group">5</button> 
<button class="group">6</button>

Answer 2

Лучше это классами делать, а не через ID. Назначить на кнопки, которые надо вызывать, общий класс и искать их через document.querySelectorAll('.className')

let buttons = ['#btn1', '#btn2', "#btn3"]; 
let startBtn = document.querySelector("#start"); 
 
//назначаем событие кнопкам. 
buttons.forEach((item)=>{ 
 document.querySelector(item).onclick = () => { 
  console.log("Click "+ item) 
 } 
}) 
 
//Назначаем событие на кнопку "start all" 
startBtn.onclick = () => { 
  console.log("START ALL"); 
  buttons.forEach(item=>document.querySelector(item).onclick()); 
 }
<button id="btn1">btn</button> 
<button id="btn2">btn</button> 
<button id="btn3">btn</button> 
<button id="start">start all</button>

READ ALSO
Возврат значения из функции

Возврат значения из функции

Есть функция, где необходимо высчитать playerhealth после проведения атаки противником, чтобы определять вызывать ли потом нового противника...

97
Не работает замена подстроки в строке JS

Не работает замена подстроки в строке JS

Существует массив с именами allRoles, а также строковая переменная textSearchIn с текстомСледующий код по идее должен находить в переменной textSearchIn...

106
Как создать несколько объектов через один конструктор? JavaScript

Как создать несколько объектов через один конструктор? JavaScript

Попробую объяснить, что мне нужно, на данном примере я создаю 1 объект, в который передаю 3 параметра, а как сделать так, чтобы я мог создать...

84
Преобразование типизированного объекта в TypeScript

Преобразование типизированного объекта в TypeScript

Подскажите, пожалуйста, как в TypeScript obj преобразовать в newObj?

88