Как менять цвет текста при клике?

116

25 марта 2021, 09:00

Изучаю JavaScript. Хочу сделать, чтобы при клике на параграф текст в нём менял свой цвет на красный, а при повторном клике перекрашивался обратно в чёрный. Применил if, но если использую оператор повторно, то первый не работает. Интересует только вариант на чистом JS, не jQuery.

function clickColor() { 
	var d; 
	d = document.getElementById('tagP'); 
 
	if (d.style.color='red') { 
		d.style.color='black'; 
	} 
 
	if (d.style.color='black') { 
		d.style.color='red'; 
	} 
 
	console.log(d.style.color); 
};

<!DOCTYPE html> 
<html lang="en"> 
<head> 
	<meta charset="UTF-8"> 
	<title>Document</title> 
</head> 
<body> 
	<div class="countr"> 
		 
		<p id="tagP" onclick="clickColor()">Россия</p> 
		<p>Австрия</p> 
		<p>Польша</p> 
		<p>Латвия</p> 
		<p>Чехия</p> 
 
	</div> 
 
 
	<script src="script.js" type="text/javascript"></script> 
</body> 
</html>

Answer 1

for (var p of document.getElementsByTagName('p')) { 
  // Берём все теги <p> и проходимся по каждому 
  p.onclick = function() { 
    // В функции onclick указываем цвет противоположный текущему (с тернарным оператором) 
    this.style.color = this.style.color === 'red' ? 'black' : 'red'; 
  } 
}

<p>Россия</p> 
<p>Австрия</p> 
<p>Польша</p> 
<p>Латвия</p> 
<p>Чехия</p>

Разница между addEventListener() и onclick

Answer 2

Вы в условиях if присваиваете значение, а не сравниваете. Используйте оператор == вместо =.

Answer 3

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

document.addEventListener('click', function(e) { 
  if (e.target.tagName === 'P') { 
    e.target.style.color = e.target.style.color === 'red' ? 'black' : 'red'; 
  } 
});

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, pariatur.</p> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, pariatur.</p> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, pariatur.</p> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, pariatur.</p> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, pariatur.</p> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, pariatur.</p>