Почему в данному случае ошибка, не возводит в квадрат после клика?

Question

[olya_097]

Даны N абзацев с числами. По нажатию на любой абзац запишите в него квадрат числа, которое в нем находится.

Answer 1

[Archakov Dennis]

Тебе надо пробежаться по каждому параграфу и забиндить в него обработчик клика.

var links = document.querySelectorAll('p');
for (var p = 0; p < links.length; p++) {
	const paragraph = links[p];
  paragraph.addEventListener('click', function (){
    paragraph.innerText = Math.pow(paragraph.innerText, 2);
  });
}

Comments

[olya_097]

спасибо
а если я добавила во вторую строку [i] то почему это не решает проблему? теперь то я ж обращаюсь к каждому вроде как
https://jsfiddle.net/mj9pkuL8/3/

Answer 2

[Александр]

Потому что links не имеет addEventListener потому что это не JQuery вам.

document.querySelectorAll('p').forEach((item)=>{item.addEventListener('click', function (){

		this.innerHTML= Math.pow(parseInt(this.innerHTML),2);

})})

Answer 3

[Stalker_RED]

Потому что querySelectorAll возвращает не один элемент, а список (NodeList) а у списка нет метода addEventListener.
Нужно на каждый элемент вешать отдельный eventListener

Comments

[olya_097]

спасибо
а если я добавила во вторую строку [i] то почему это не решает проблему? теперь то я ж обращаюсь к каждому вроде как
https://jsfiddle.net/mj9pkuL8/3/

[Stalker_RED]

olya_097, Оля, вы не обижайтесь, но это ужасно.
Вы уже почти год учите js, но даже не пытаетесь смотреть какие ошибки ваш код выбрасывает в консоль.

Не обращаетесь вы к каждому, потому что прямо во второй строке ошибка, и дальше все не работает.

[olya_097]

Stalker_RED, На Вас мне незачто обижаться
Вам только огромное спасибо могу сказать

но то что ошибка во 2 строке я видела
но как исправить именно в том коде

[Stalker_RED]

olya_097, ок, давай по пунктам.
Вот вы увидели Uncaught ReferenceError: i is not defined
Вы понимаете смысл этого сообщения?

[olya_097]

Stalker_RED, нету i, по сути не объявлена?

[Stalker_RED]

olya_097, правильно!
Значит что нужно сделать?

[olya_097]

Stalker_RED, написать второй строкой var i=0; ?

[Stalker_RED]

olya_097, отлично!
но тогда ведь будет обращение только к самому первому элементу из списка.

Что можно сделать, чтобы к каждому?

[olya_097]

Stalker_RED, перебрать форичем?
к примеру так?
https://codepen.io/pumpuroom/pen/PXpaKq

[Stalker_RED]

olya_097, отлично, и даже работает

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

[olya_097]

Stalker_RED, https://codepen.io/anon/pen/zyZJJw

[Stalker_RED]

olya_097, отлично.
то что нужно было же?

[olya_097]

Stalker_RED, да