Javascript-форум - Смена цвета div по нажатию

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

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

- - Смена цвета div по нажатию (https://javascript.ru/forum/misc/73850-smena-cveta-div-po-nazhatiyu.html)

Смена цвета div по нажатию

есть задача-Даны несколько div элементов на html.По первому нажатию на каждый div он перекрашивается зеленым цветом, при повторном нажатии перекрашивается обратно и так далее каждый клик происходит чередование цвета. вот набросал такой код, но не работает. Помогите, пожалуйста. Что нужно переделать и почему?

<!doctype html>

<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Title</title>
		<link rel="stylesheet" href="style.css">
		<script src="js.js">
			
		</script>
	</head>
	<body>
		

		<div id="box1"></div>
    	<div id="box2"></div>
	</body>
</html>

var box = document.getElementsByTagName("DIV")
box.onclick = function(){

	if(true){
		box.style.backgroundColor = 'green';
	} else{
		box.style.backgroundColor = '';
	}
};

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Title</title>
	<style>
	div{
		width: 100px;
		height: 100px;
		transition: 1s;
	}
</style>
</head>
<body>
	<div id="box1" style="background-color: red;"></div>
	<div id="box2" style="background-color: blue;"></div>
<div style="background-color: yellow;"></div>
	<script>

		var col =[];
		document.querySelectorAll("div").forEach((el, i)=>{
			col[i] = getComputedStyle(el).backgroundColor;
			el.onclick =e=> {
				el.style.backgroundColor = getComputedStyle(el).backgroundColor === col[i]?'green':col[i];
			};
		});
	</script>
</body>
</html>

if(true) = всегда!
backgroundColor = '' - нет такого цвета
box - Это коллекция для нее нужен цикл или циклический метод

а можно именно по моему коду переделку ?

Tempest,

<!doctype html>

<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Title</title>
         <style type="text/css">
         div{
             width: 100px;
             height: 100px;
             border: 1px dashed Gray;
             padding: 5px;
         }

         </style>
    </head>
    <body>



       <div></div>
        <div id="box1"></div>
    	<div id="box2"></div>
      <script>
var box = document.getElementsByTagName("DIV");
for (var i = 0; i < box.length; i++)
    box[i].onclick = function() {
    if (this.style.backgroundColor == "") this.style.backgroundColor = "green";
    else this.style.backgroundColor = ""
};
        </script>
    </body>
</html>