var box1 = document.getElementById('box1'); var box2 = document.getElementById('box2'); var box3 = document.getElementById('box3'); var box4 = document.getElementById('box4'); var box5 = document.getElementById('box5'); var box6 = document.getElementById('box6'); var box7 = document.getElementById('box7'); var box8 = document.getElementById('box8'); var box9 = document.getElementById('box9'); var box10 = document.getElementById('box10'); var box11 = document.getElementById('box11'); var box12 = document.getElementById('box12'); var box13 = document.getElementById('box13'); var box14 = document.getElementById('box14'); var box15 = document.getElementById('box15'); var box16 = document.getElementById('box16'); var box17 = document.getElementById('box17'); var box18 = document.getElementById('box18'); var box19 = document.getElementById('box19'); var box20 = document.getElementById('box20'); var box21 = document.getElementById('box21'); var box22 = document.getElementById('box22'); var box23 = document.getElementById('box23'); var box24 = document.getElementById('box24'); var box25 = document.getElementById('box25'); function first_gray(target1){ if(target1.style.background == 'skyblue') { target1.style.background = 'gray'; } else{ target1.style.background = 'skyblue'; }} function first_blue(target2){ if(target2.style.background == 'gray') { target2.style.background = 'skyblue'; } else{ target2.style.background = 'gray'; }} box1.addEventListener('click',function(){ first_blue(box1); first_blue(box2); first_blue(box6); }); box2.addEventListener('click',function(){ first_blue(box1); first_blue(box2); first_blue(box3); first_blue(box7); }); box3.addEventListener('click',function(){ first_blue(box2); first_blue(box3); first_blue(box4); first_blue(box8); }); box4.addEventListener('click',function(){ first_blue(box3); first_blue(box4); first_blue(box5); first_blue(box9); }); box5.addEventListener('click',function(){ first_blue(box4); first_blue(box5); first_blue(box10); }); box6.addEventListener('click',function(){ first_blue(box1); first_blue(box6); first_blue(box7); first_blue(box11); }); box7.addEventListener('click',function(){ first_blue(box2); first_blue(box6); first_blue(box7); first_blue(box8); first_blue(box12); }); box8.addEventListener('click',function(){ first_blue(box3); first_blue(box7); first_blue(box8); first_blue(box9); first_gray(box13); }); box9.addEventListener('click',function(){ first_blue(box4); first_blue(box8); first_blue(box9); first_blue(box10); first_blue(box14); }); box10.addEventListener('click',function(){ first_blue(box5); first_blue(box9); first_blue(box10); first_blue(box15); }); box11.addEventListener('click',function(){ first_blue(box6); first_blue(box11); first_blue(box12); first_blue(box16); }); box12.addEventListener('click',function(){ first_blue(box7); first_blue(box11); first_blue(box12); first_gray(box13); first_blue(box17); }); box13.addEventListener('click',function(){ first_blue(box8); first_blue(box12); first_gray(box13); first_blue(box14); first_blue(box18); }); box14.addEventListener('click',function(){ first_blue(box9); first_gray(box13); first_blue(box14); first_blue(box15); first_blue(box19); }); box15.addEventListener('click',function(){ first_blue(box10); first_blue(box14); first_blue(box15); first_blue(box20); }); box16.addEventListener('click',function(){ first_blue(box11); first_blue(box16); first_blue(box17); first_blue(box21); }); box17.addEventListener('click',function(){ first_blue(box12); first_blue(box16); first_blue(box17); first_blue(box18); first_blue(box22); }); box18.addEventListener('click',function(){ first_gray(box13); first_blue(box17); first_blue(box18); first_blue(box19); first_blue(box23); }); box19.addEventListener('click',function(){ first_blue(box14); first_blue(box18); first_blue(box19); first_blue(box20); first_blue(box24); }); box20.addEventListener('click',function(){ first_blue(box15); first_blue(box19); first_blue(box20); first_blue(box25); }); box21.addEventListener('click',function(){ first_blue(box16); first_blue(box21); first_blue(box22); }); box22.addEventListener('click',function(){ first_blue(box17); first_blue(box21); first_blue(box22); first_blue(box23); }); box23.addEventListener('click',function(){ first_blue(box18); first_blue(box22); first_blue(box23); first_blue(box24); }); box24.addEventListener('click',function(){ first_blue(box19); first_blue(box23); first_blue(box24); first_blue(box25); }); box25.addEventListener('click',function(){ first_blue(box20); first_blue(box24); first_blue(box25); });