Javascript как изменить цвет кнопки в обработчике без явного написания ее имени?

Question

У меня тут много блоков повторяющегося текста типа:

const ba = document.getElementById("bba");
const bb = document.getElementById("bbb");
const bz = document.getElementById("bbz");


ba.onclick = () => {
  //куча кода.....
  //куча кода.....
  //куча кода.....

  //изменение  цвета кнопки
  ba.style.backgroundColor = '#00f';
  setTimeout(() => {
    ba.style.backgroundColor = '';
  }, 200);
}

//Кнопка вывод отладки
bb.onclick = () => {
  //куча кода.....
  //куча кода.....
  //куча кода.....

  //изменение  цвета кнопки
  bb.style.backgroundColor = '#00f';
  setTimeout(() => {
    bb.style.backgroundColor = '';
  }, 200);
}

bz.onclick = () => {
  //куча кода.....
  //куча кода.....
  //куча кода.....

  //изменение  цвета кнопки
  bz.style.backgroundColor = '#00f';
  setTimeout(() => {
    bz.style.backgroundColor = '';
  }, 200);
}

<style>
* {
  background-color: #111;
  color: #eee;
  }
  button {
    float: center;
    color: #eee;
    background-color: #111;
    border: 2px solid #aaa;
    border-radius: 10px;
  }

  </style>

<button id="bba">1</button>
.
.
.
.
<button id="bbb">4</button>

.
.
.
.
<button id="bbz">10</button>

И я хотел бы сделать вот так

  ba.onclick = () =>
            { 
             style.backgroundColor='#009'; 
                      
            }

Тоесть без упоминания названия вызвавшей кнопки но так не получается. Можно ли как-то указать этой строке что я хочу изменить свойства родительской функции что ли.

Тоесть в идеале я хотел бы просто вызывать функцию смены цвета,без указания пераметров типа setcolor(ba), а просто setcolor()

ba.onclick = () =>
        { 
         setcolor(); 
          }
bb.onclick = () =>
        { 
         setcolor(); 
         }
bc.onclick = () =>
        { 
         setcolor(); 
          }
bd.onclick = () =>
        { 
         setcolor(); 
          }
be.onclick = () =>
        { 
         setcolor(); 
      }

Answer 1

Вы не в том месте автоматизируете:

const setColorOnClick = button => {
    button.addEventListener('click', () => {
        button.style.backgroundColor = '#009';
    });
};

setColorOnClick(ba);
setColorOnClick(bb);
...

P.S. Не надо .onclick =. Это код стирает всё остальные реакции на onclick. .addEventListener('click', ) работает намного аккуратнее и позволяет собирать поведение кнопки из кусочков.

Answer 2

style это свойство некого элемента. Как вы думаете, как должен вести себя js когда вы вызываете style без указания элемента? К чему оно должно относиться? Как указать в системе, что стиль должен применяться именно к кнопке A, а не к кнопке B? Или, представьте, что у вас 100 кнопок. В какой из них должен примениться стиль?
Если у вас много блоков повторяющегося текста, то отличие 1-го варианта от 2-го буквально минимальные, и это вас в любом из случаев не спасёт

Вы можете вынести это всё в отдельные обработчики:

function setColorToBlue(button) {
    button.style.backgroundColor = '#009';
}

function setColorToRed(button) {
    button.style.backgroundColor = '#990000';
}

А потом применить это на onclick:

ba.onclick = function() { setColorToBlue(this); };
bb.onclick = function() { setColorToRed(this); };
bc.onclick = function() { setColorToBlue(this); };
bd.onclick = function() { setColorToRed(this); };

Если что, то такой вариант не будет работать:

ba.onclick = () => setColorToBlue(this);
bb.onclick = () => setColorToRed(this);
bc.onclick = () => setColorToBlue(this);
bd.onclick = () => setColorToRed(this);

Так же вы можете использовать css селекторы, что бы применить addEventListener по умолчанию для нужных элементов

const redButtons = document.querySelectorAll('.red-button')
redButtons.forEach(btn => {
    btn.addEventListener('click', () => {
        btn.style.backgroundColor = '#990000';
    })
})

const blueButtons = document.querySelectorAll('.blue-button')
blueButtons.forEach(btn => {
    btn.addEventListener('click', () => {
        btn.style.backgroundColor = '#009';
    })
})

В таком случае, вам не придётся вручную прописывать логика для изменения цвета отдельно для каждой кнопки (или других элементов)

Answer 3

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

Без параметров не получится. Но можно использовать объект самого события.

const setcolor = o => o.style.backgroundColor='#009'
const act = e => { 
  const o = e.currentTarget 
  setcolor(o); 
}
ba.onclick = act
bb.onclick = act
bc.onclick = act

const def = {
  add(o){
    console.log('Выполняется куча кода по добавлению...')
  },
  edit(o){
    console.log('Выполняется куча кода по редактированию...')
  },
  del(o){
    console.log('Выполняется куча кода по удалению...')
  }
}
test.addEventListener('click', e => {
  const o = e.target.closest('button')
  if (!o) return
  const t = o.dataset.act
  if (t) def[t](o)
  setcolor(o)
})

<button id='ba'>Тест 1</button>
<button id='bb'>Тест 2</button>
<button id='bc'>Тест 3</button>

<section id='test'>
  <button data-act='add'>Добавить</button>
  <button data-act='edit'>Редактировать</button>
  <button data-act='del'>Удалить</button>
</section>

Если ты ТС мог показать свой тестовый пример... Возможно можно было бы вообще использовать делегирование событий.

БЛОГ НА HUSL

Javascript как изменить цвет кнопки в обработчике без явного написания ее имени?

Ответы (3 шт):