Javascript-форум - Удаление содержимого переменной

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Удаление содержимого переменной (https://javascript.ru/forum/misc/48897-udalenie-soderzhimogo-peremennojj.html)

Удаление содержимого переменной

Есть 3 блока DIV
при нажатии каждый из них меняет цвет,первый раз это работает,во 2 раз второй блок меняет цвет,но и 1 DIV остается с тем же цветом,как это исправить?
div2.style.backgroundColor="";-знаю про этот способ,он не подходит,есть еще способ?

<html>
	<head>
		<title>example</title>
	</head>
	<body>
<div style="width: 50px; height: 50px; background-color: red;"></div>
 <script>
document.querySelector('div').onclick = function ()
	{
	this.style.backgroundColor = '';
	};
 </script>
	</body>
</html>

Цитата:

Сообщение от skrudjmakdak (Сообщение 322034)

<html>
	<head>
		<title>example</title>
	</head>
	<body>
<div style="width: 50px; height: 50px; background-color: red;"></div>
 <script>
document.querySelector('div').onclick = function ()
	{
	this.style.backgroundColor = '';
	};
 </script>
	</body>
</html>

вы меня не так поняли,мне нужно что бы при клике на div,у других div менялся цвет на первоначальный.
Например:
я нажал на 1 блок,он стал черный,нажимаю на 2 блок,2 блок стал черный,а первый стал с исходным текстом.

абсолютно ничего сложного, пару строк кода ))

<html>
	<head>
		<title>example</title>
		<style>
		.bl
		{
		width: 50px;
		height: 50px;
		margin: 10px;
		border: 1px solid black;
		float: left;
		}
		</style>
	</head>
	<body>
		<div style="width: 400px; overflow: hidden;">
			<div class="bl"></div>
			<div class="bl"></div>
			<div class="bl"></div>
			<div class="bl"></div>
			<div class="bl"></div>
			<div class="bl"></div>
			<div class="bl"></div>
			<div class="bl"></div>
			<div class="bl"></div>
			<div class="bl"></div>
			<div class="bl"></div>
			<div class="bl"></div>
			<div class="bl"></div>
			<div class="bl"></div>
			<div class="bl"></div>
			<div class="bl"></div>
			<div class="bl"></div>
			<div class="bl"></div>
			<div class="bl"></div>
			<div class="bl"></div>
		</div>
 <script>
var prev;

Array.prototype.forEach.call(document.querySelectorAll('.bl'), function (ths)
	{
	ths.onclick = function ()
		{
		this.style.backgroundColor = 'black';
		if (prev)
			prev.style.backgroundColor = '';

		if (prev == this)
			prev = undefined;
		else
			prev = this;
		}
	});
 </script>
	</body>
</html>

для вас ничего сложного,а вот я здесь кое-что не понял,ну это уже мои проблемы.

что именно? отвечу

:write: ещё вариант ...

<html>
	<head>
		<title>example</title>
		<style>
		.bl
		{
		width: 50px;
		height: 50px;
		margin: 10px;
		border: 1px solid black;
		float: left;
		}
        .black{
          background: #000000
        }

		</style>
	</head>
	<body>
		<div style="width: 400px; overflow: hidden;">
			<div class="bl"></div>
			<div class="bl"></div>
			<div class="bl"></div>
			<div class="bl"></div>
			<div class="bl"></div>
			<div class="bl"></div>
			<div class="bl"></div>
			<div class="bl"></div>
			<div class="bl"></div>
			<div class="bl"></div>
			<div class="bl"></div>
			<div class="bl"></div>
			<div class="bl"></div>
			<div class="bl"></div>
			<div class="bl"></div>
			<div class="bl"></div>
			<div class="bl"></div>
			<div class="bl"></div>
			<div class="bl"></div>
			<div class="bl"></div>
		</div>
 <script>
var prev;

Array.prototype.forEach.call(document.querySelectorAll('.bl'), function (ths)
	{
	ths.onclick = function ()
		{
		var black = document.querySelector('.black');
        if(!this.classList.contains('black') && black) black.classList.remove('black');
		this.classList.toggle('black');
		}
	});
 </script>
	</body>
</html>