Funkcja, która działa na każdy element z tablicy osobno.

Witam programistów.
Potrzebuje stworzyć taką funkcje, która działa na każdy element z tablicy osobno. Stworzyłem stałą, która zawiera wszystkie divy o tej samej klasie document.querySelectorAll(".klasa");
i chciałbym żeby na każdego tego diva działała pewna funkcja, która wykonuje się tylko raz tylko na tym divie. Udało mi się stworzyć taką funkcje, która działa na każdy div ale wtedy wykonuje się ona na każdym divie. Ja potrzebuje aby wykonywała się ta sama funkcja na każdym divie z osobna, który został zawołany w pewien sposób (np. poprzez kliknięcie na niego).

Nie wiem, czy dobrze zrozumiałem.
Jeżeli chcesz, żeby wykonała się jakaś funkcja po kliknięciu na np. przycisk, dodaj ją przez addEventListener:

function clickHandler(event) {
    console.log(event.target);
}

const elements = document.querySelectorAll(".klasa");
elements.forEach(el => el.addEventListener("click", clickHandler));

Jeżeli chcesz, żeby ta funkcja wykonała się tylko raz to 'odepnij' ją po wykonaniu przez removeEventListener:

function clickHandler(event) {
    event.target.removeEventListener("click", clickHandler);
}

const elements = document.querySelectorAll(".klasa");
elements.forEach(el => el.addEventListener("click", clickHandler));

Tak. O to chodziło. Każdy kliknięty element przyjmuje funkcje na sobie. Dzięki wielkie!

A jeszcze mam taką prośbę. ogólnie to działa fajnie, każdy div ma tą samą funkcję wykonywaną osobno ale jeżeli chciałbym żeby na tego diva działała jedna funkcja, a w tej funkcji kolejna kolejna, która też odpowiada innym divom tooo własnie jak ? Niżej pokazuje o co mi chodzi:

const circles = document.querySelectorAll(".square");
	const ars = document.querySelectorAll(".ar");
	
	circles.forEach(myFunction)
	
		function myFunction(circle) {
			circle.addEventListener("click", myScript);
			function myScript() {
				circle.style.display = "none";
					ars.forEach(lol)
						function lol() {
							Tutaj na każdy element z stałej ars ma działac ta funkcja osobno, na odpowiednie elementy z stałej circles, by nie było, 
                             że wszystkie elementy z ars wykonują tę funkcję. W sensie, żeby na pierwszy element z circles działał pierwszy element z ars.
					}
				}

Po pierwsze pozwoliłem sobie nieco sformatować Twój kod - nie wiem dlaczego zagnieżdżasz w sobie tak te funkcje. Dla przykładu, w funkcji myScript zmienna circle jest dostępna tylko dlatego, że funkcja ta jest zdefiniowana wewnątrz drugiej i dziedziczy po niej kontekst, gdybyś przeniósł ją gdzie indziej to przestanie działać. Polecam również zachować spójność, jeżeli chodzi o pisanie średników - raz ich używasz, a raz nie.
Następujące wywołanie:

circle.addEventListener("click", myScript);

Zapisuje myScript jako funkcję wywoływaną dla zdarzenia click, z argumentem typu MouseEvent. Nic nie stoi jednak na przeszkodzie wywołać tu funkcję anonimową, która z kolei zawoła myScript z innymi argumentami, np. obecnie przetwarzanym elementem:

circle.addEventListener("click", (event) => myScript(circle));

Teraz, przerabiany myScript tak, aby akceptował parametr circle i przekazywał go do wywołania forEach na tablicy ars:

function myScript(circle) {
    circle.style.display = "none";
    ars.forEach((ar) => lol(ar, circle));
}

function lol(ar, circle) {
    // zrób coś z ar i circle
}

Wszystko prawie fajnie tylko circle.addEventListener("click", (event) => myScript(circle)); działa na każdym elemencie z const circles = document.querySelectorAll(".square"); i o to chodzi tylko wtedy, gdy wykonujemy ars.forEach((ar) => lol(ar, circle)); to ona również wykonuje się na każdym elemencie z circles i to powoduje ze wszystkie elementy z const ars = document.querySelectorAll(".ar"); otrzymują tą funkcje function lol(ar, circle). Chciałbym aby wszystkie elementy z const ars dostały funkcję (i tak się dzieje) ale jednocześnie, żeby nie wszystkie ją wykonywały (czyli, że pierwszy element z circles odpowiada pierwszemu z ars, potem drugi, drugiemi, trzeci trzeciemu itd.). Aby pierwszy z circles odpowidał pierwszemu z ars, drugi, drugiemu i tak w nieskończoność Dołączę zdjięcie bo faktycznie ciężko to zrozumieć a ciężej wytłumaczyć

Rozumiem, czyli to, co potrzebujesz tak na prawdę, to przypisane danego circle do ar. Możesz do tego wykorzystać np. drugi argument przekazywany metodzie w forEach, który jest indeksem przetwarzanego elementu

const circles = document.querySelectorAll(".square");
const ars = document.querySelectorAll(".ar");
circles.forEach((circle, idx) => myFunction(circle, ars[idx]));

function myFunction(circle, ar) {
    circle.addEventListener("click", (event) => myScript(circle, ar));
}

function myScript(circle, ar) {
    circle.style.display = "none";
    lol(circle, ar);
}

function lol(circle, ar) {
    // circle i odpowiadający mu ar
}

Sensowniej będzie jednak opakować odpowiadające elementy circle i ar w jakiegoś wspólnego rodzica, i odwoływać się do nich w obrębie tego elementu:

<div class="container">
    <div class="square"></div>
    <div class="ar"></div>
</div>

const containers = document.querySelectorAll('.container');
containers.forEach((container) => {
    const square = container.querySelector('.square');
    const ar = container.querySelector('.ar');

    square.addEventListener('click', (event) => lol(square, ar));
});
function lol(square, ar) {
// square i odpowiadający mu ar
}

Jesteś Bogiem :D Co prawda nie wszystko jeszcze rozumiem, a na tym najbardziej mi zależy, bo uczę się dopiero ale to co napisałeś działa. Dzięki wielkie i pozdrawiam cieplutko!