Nie wiem jak zrobić pewną funkcje dla diva

Question

Chcę zrobić coś takiego że po kliknięciu diva który ma dołączony onclick bo jest tych divów pare i każdy robi co innego i mam funkcje która wyłapuje te onclicki i coś tam robi a ja chcę zrobić tak że podczas klikania tego diva ten div się zmniejszy a po puszczeniu klika ten div się zwiększy do początkowego rozmiaru i próbowałem to zrobić ale nie wyszło to jest kod który myślałem ze będzie działać ale nie działa wie ktoś jak to zrobić dla parę onclicków ale też tak aby to nie było 100 linijek kodu??

To jest kod który niestety nie działa:

function nacisk(value){	
    klikanie_przyciskow(value); 
}
function klikanie_przyciskow(clic){
    var zmienna = document.querySelector(".przycisk_" + clic);
    
    zmienna.addEventListener("click", function(e){
        e.style.width = "40px";
        e.style.height = "40px";
        e.style.marginTop = "2%";
        e.style.marginRight = "1%";
        e.style.marginLeft = "3%";
        alert(e);
    });
    
    zmienna.addEventListener("mouseup", function(e){
        e.style.width = "45px";
        e.style.height = "45px";
        e.style.marginTop = "0%";
        e.style.marginRight = "0%";
        e.style.marginLeft = "1.5%";
        alert(e);
    });
}

Jest to zrobione w innej funkcji ponieważ ta 1 funkcja to jest funkcja od onclicków i to jest tylko do numerów od 0 do 9 i są jeszcze inne divy.

Answer 1

W zmiennej e, która siedzi w callbacku, przechowywana jest obiekt o nazwie MouseEvent. Obiekt ten zawiera taką właściwość jak path. Jest to tablica w której znajduję się elementu które są w miejscu tego gdzie klikneliśmy. 0 indeks tej tablicy to "najmłodszy" element. Jeśli chcesz zmienić właściwości tego elementu kod powinien wyglądać tak: 

zmienna.addEventListener("click", function(e){
        e.path[0].style.width = "40px";
         e.path[0].style.height = "40px";
         e.path[0].style.marginTop = "2%";
         e.path[0].style.marginRight = "1%";
         e.path[0].style.marginLeft = "3%";
    });

 

Answer 2

Kliknięty element znajduje się w e.target, samo e to obiekt zdarzenia (czyli zawierający informację, co się stało i gdzie dokładnie na stronie).