Как вывести элемент по клику в js?

Question

[koposov_v]

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

А если коротко про мое задание, есть кнопочки

const btn = document.getElementsByClassName('btn__link');

и как мне добавить событие на кнопку которую я жмякнул ЭТА КНОПКА.addEventListener('submit', formSend);

Answer 1

[gracer]

Слушатель события submit надо вешать на форму, не на кнопку.
getElementsByClassName возвращает набор элементов, а значит надо пройтись по этому набору и навесить на каждый элемент слушатель. Если элемент один проще искать его через querySelector
В вашем случае можно сделать примерно так:

// Находим элемент формы, которую надо отправить.
// Вместо form можно указать класс, id и т.п.
const btn = document.querySelector('form');
// вешаем слушатель
btn.addEventListener('submit', formSend);

Comments

[koposov_v]

Да, я так и делал вначале, у меня получается 2 формы, и если я жмякну на форму, функция formSend ,будет с ней манипуляции проводить?
Я просто не совсем понимаю как это работает, если мы просто передаем объeкты (btn) как js понимает, что мы кликнули на ту форму и будет с ней работать. (у меня 2 формы просто одна обычная вторая для модала)

[gracer]

koposov_v,
document.querySelector('form')
возьмёт первый элемент на странице. Если надо железно определённую форму взять, то можно указать id форме и в js найти её можно так
document.querySelector('#form')
Далее на неё вешается слушатель, который вызовет нужную функцию при отправке.
addEventListener('submit', formSend)
Т.е. в вашем случае он вызовет formSend. Остальное зависит от того что в этой функции находится. Но в функцию, которую вызовет слушатель передаётся также объект события, в котором можно найти и ссылку на форму, которая отправляется.

[gracer]

koposov_v,
Например

function formSend(event) {
  // останваливаем отправку формы
  event.preventDefault();
  // выводим в консоль нашу форму, которая вызвала событие
  console.log(event.target);
}

[koposov_v]

gracer, Это все верно, я это понимаю, но у меня выходит ошибка, у меня 2 формы одна для модала (точно такая же), вторая на стр
И нужно когда я жмякаю отправить данные на php и обработать, но мне нужно указать с какой формы брать эти данные, а я не могу выбрать форму

document.addEventListener('DOMContentLoaded', function () {
	const form = document.querySelectorAll('form');

	form.addEventListener('submit', formSend);
	async function formSend(e) {
		e.preventDefault();
....... (далее)

Вот это не работает и тот что парень внизу написал тоже
вот такая ошибка

[gracer]

koposov_v, Вы упираетесь в одну и ту же ошибку, querySelectorAll тоже возвращает набор элементов, найденных на странице. Их надо перебрать и навесить слушатели.

document.addEventListener('DOMContentLoaded', function () {
  const form = document.querySelectorAll('form');

   form.forEach((el) => {
     el.addEventListener('submit', formSend);
   });

  async function formSend(e) {
    e.preventDefault();
....... (далее)

[koposov_v]

gracer, боже мой спасибо, до меня доперло теперь )

[koposov_v]

koposov_v, бог ты мой, я теперь понял
ураааааааааааа

Answer 2

[Олег]

Если говорить о событии click, то необходимо использовать не this, а объект MouseEvent и его свойство target

const btn = document.querySelector('.btn__link');

btn.addEventListener('click', (e) => {
    console.log(e.target);
});

А вот событие submit нужно слушать на форме, а не на кнопке

const form = document.querySelector('.form');

form.addEventListener('submit', (e) => {
    e.preventDefault();
});

Comments

[koposov_v]

Спасибо!!

Answer 3

[SHNM]

btn.onclick = function () {
console.log(this);
}

Comments

[koposov_v]

Вот в том то и дело не работает это

[koposov_v]

Вот

const btn = document.querySelectorAll('form');
	console.log(btn);
	btn.onclick = function () {
		console.log(this);
	}

[SHNM]

koposov_v,

const btn = document.querySelector('.button');
  btn.onclick = function () {
    console.log(this);
  }

Вы сами написали, что у вас определённые кнопки. Замените данный класс на свой класс, на который кликать нужно будет

[koposov_v]

SHNM, верно, у меня отпрядённые кнопки их всего 2 и эти кнопки находятся в 2 формах, querySelector у меня выводит только одну форму, мне нужен объект который состоит из 2 форм т.е. нужно использоваться querySelectorAll