CP_div_bg

div bg color

by bryiantan

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Das 7</title>
	<style>
			.parent{
			overflow: hidden;
		}
		.d2{
			float: left;
			margin: 1px;
			outline: 1px solid red;
			width: 100px;
			height: 100px;
		}
	</style>
</head>
<body>
	<div>
		<div class="parent">
			<div class="d2"></div>
			<div class="d2"></div>
			<div class="d2"></div>
			<div class="d2"></div>
		</div>
		<div class="parent">
			<div class="d2"></div>
			<div class="d2"></div>
			<div class="d2"></div>
			<div class="d2"></div>
		</div>
		<div class="parent">
			<div class="d2"></div>
			<div class="d2"></div>
			<div class="d2"></div>
			<div class="d2"></div>
		</div>
		<div class="parent">
			<div class="d2"></div>
			<div class="d2"></div>
			<div class="d2"></div>
			<div class="d2"></div>
		</div>
	</div>
</body>

</html>

<script>
var arr = document.querySelectorAll(".d2");
for(var i = 0; i < arr.length; i++){
	arr[i].addEventListener("click", F);
  //track the clicked cell index
  arr[i].clickedCellIndex = i; 
}

function F(ent){
	var r = parseInt(Math.random()*20), i;
  var duplicateFound = false;
  
//	alert(ent.target.clickedCellIndex);
  for (i = 0; i < arr.length; ++i) {
  //alert(Number(arr[i].innerHTML));
  	if(arr[i].innerHTML != '' && arr[i].innerHTML == r){
      arr[i].style.background = "red";
      duplicateFound =true;
    }
  }
  
  this.innerHTML = r;
  
  //update the clicked cell color
  if (duplicateFound) {
  	arr[ent.target.clickedCellIndex].style.background = "red";
  }
  
}
</script>