-1

var d = document.querySelectorAll('p');

for(var i = 0; i< d.length; i++){
  d[i].onclick = function(){
     // style.color = 'red';
      alert(12)
  };
};
 <p>Параграф</p>

<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>

Вот так alert выводит сообщение 

var d = document.querySelectorAll('p');

for(var i = 0; i< d.length; i++){
  d[i].onclick = function(){
     style.color = 'red';
      // alert(12)
  };
};

Вот так цвет не текста не меняется почему ?

Leks
  • 151

1 Answers1

2

Во-первых, надо указывать какому элементу применяются стили

не

style.color = 'red';

а

element.style.color = 'red';

или

this.style.color = 'red';

var d = document.querySelectorAll('p');

for (let i = 0; i < d.length; i++) {
  d[i].onclick = function() {
    d[i].style.color = 'red';


};
};
<p>Параграф</p>

<p>Text-1</p>
<p>Text-2</p>
<p>Text-3</p>
<p>Text-4</p>

А во-вторых про let && var

Если в цикле переменная объявлена var i = 0 ; -- ; --

То у нас такая картина

var d = document.querySelectorAll('p');

for (var i = 0; i < d.length; i++) {
  d[i].onclick = function() {
    //d[i].style.color = 'red';
    console.log(i);
    this.style.color = 'red';
  };
};
<p>Параграф</p>

<p>Text-1</p>
<p>Text-2</p>
<p>Text-3</p>
<p>Text-4</p>

Переменная i у нас глобальная и если раскомментировать строку

//d[i].style.color = 'red';

И мы получим ошибку... Так как i У нас переменная глобальная

А если в цикле переменная объявлена let i = 0 ; -- ; --

var d = document.querySelectorAll('p');

for (let i = 0; i < d.length; i++) {
  d[i].onclick = function() {
    d[i].style.color = 'red';
    console.log(i);


};
};
<p>Параграф</p>

<p>Text-1</p>
<p>Text-2</p>
<p>Text-3</p>
<p>Text-4</p>

И мы не получим ошибку... Так как i У нас переменная локальная и видная в рамках цикла for

Air
  • 14,505