При клике цвет текста не меняется

131

11 декабря 2020, 17:20

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) 
  }; 
};

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

Answer 1

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

не

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

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

По ссылке href передать заполненную форму

Вот фрагмент jsp-страницы, где формируется таблица:

103

javascript

Добавление в бд WEB SQL

нужна помощьЕсть бд через openDatabase, можно ли сделать так, чтобы кнопка, например в тэге <a class="a" href="#">, переносила в таблицу данные из тэгов...

111

javascript

Реализация скроллбара с ползунком на js и php

Задаешь значение двум переменным от 1 до 10 напримерИ когда перетаскиваешь ползунок он выдает значение от 1 до 10 в зависимости от своего положения,...

120

javascript

Матрица по принципу игры 2048

У нас есть 4 размерный массивНужно написать программу, который сложит ровный его число, который направо, а его сделает 0, но только один раз