Onclick change set of div's background color and image

Question

I have 5 images as buttons inside divs. By default, I am displaying image1 for div1 with background green when I click on the div1 I should change the background colour to blue and change to image2. similarly displaying image3 for div2 with background green when I click on the div2 I should change the background colour to blue and change to image4 and so on. Right now I wrote for each divs different javascript functions. Instead of writing different functions for each divs how to write all the logic in a single function?

I have one more problem. When I click on div2 the previous div should come to its original state. I should be able to change the background and image of only one div at a time.

Here is my code :

        var count = 0;

        function setColor1(id) {
            var property = document.getElementById(id + "div");
            var propertyImg = document.getElementById(id + "img");
            if (count == 0) {
                property.style.backgroundColor = "blue";
                propertyImg.src = '../Images/Icons/image2.png';
                count = 1;
            } else {
                property.style.backgroundColor = "#fff"; 
                propertyImg.src = '../Images/Icons/image1.png';
                count = 0
            }
        }
        
        function setColor2(id) {
            var property = document.getElementById(id + "div");
            var propertyImg = document.getElementById(id + "img");
            if (count == 0) {
                property.style.backgroundColor = "blue";
                propertyImg.src = '../Images/Icons/image4.png';
                count = 1;
            } else {
                property.style.backgroundColor = "#fff";
                propertyImg.src = '../Images/Icons/image3.png';
                count = 0
            }
        }
        
                function setColor3(id) {
            var property = document.getElementById(id + "div");
            var propertyImg = document.getElementById(id + "img");
            if (count == 0) {
                property.style.backgroundColor = "blue";
                propertyImg.src = '../Images/Icons/image6.png';
                count = 1;
            } else {
                property.style.backgroundColor = "#fff";
                propertyImg.src = '../Images/Icons/image5.png';
                count = 0
            }
        }

.buttonclass {
	margin-left: 30px;
	margin-bottom: 2px;
	margin-top: 2px;
	width: 25px;
	height: 25px;
	box-sizing: border-box;
	vertical-align: middle;
	text-align: center;
	position: absolute;
	z-index: 100000;
	border: solid 1px #777;
	background-color: green;
	padding: 0px;

}

<div class="buttonclass" id="1div" onclick="setColor1(1);" >
    <img id="1img" src="~/Images/Icons/image1.png">
</div>
<div class="buttonclass" id="2div" onclick="setColor2(1);" >
    <img id="1img" src="~/Images/Icons/image3.png">
</div>
<div class="buttonclass" id="3div" onclick="setColor3(1);" >
    <img id="3img" src="~/Images/Icons/image5.png">
</div>

Answer 1

There are different ways to do that:

<div class="buttonclass" onclick="setColor(this);" data-id="1" data-selected="false">
    <img src="~/Images/Icons/image1.png">
</div>
<div class="buttonclass" onclick="setColor(this);" data-id="3" data-selected="false">
    <img src="~/Images/Icons/image3.png">
</div>
<div class="buttonclass" onclick="setColor(this);" data-id="5" data-selected="false">
    <img src="~/Images/Icons/image5.png">
</div>

.

function setColor(element) {
  var id = Number(element.dataset.id);
  var prevSelected = document.querySelectorAll('[data-selected="true"]');
  element.dataset.selected = 'true';
  element.style.backgroundColor = "blue";
  element.firstElementChild.src = '../Images/Icons/image' + (id + 1) + '.png';
  prevSelected.forEach(div => {
    div.dataset.selected = 'false';
    div.style.backgroundColor = "green";
    div.firstElementChild.src = '../Images/Icons/image' + div.dataset.id + '.png';
  });
}

Other approach is to use classes to set the color witch css.

Answer 2

Just put them all in one function that does all necessary calculations based on the id parameter passed to it:

var count = 0;

function setColor(id) {
  var property = document.getElementById(id + "div");
  var propertyImg = document.getElementById(id + "img");
  if (count == 0) {
    property.style.backgroundColor = "blue";
    propertyImg.src = '../Images/Icons/image'+(id*2)+'.png';
    count++;
  } else {
    property.style.backgroundColor = "#fff";
    propertyImg.src = '../Images/Icons/image'+id+'.png';
    count = 0
  }
}

.buttonclass {
  margin-left: 30px;
  margin-bottom: 2px;
  margin-top: 2px;
  width: 25px;
  height: 25px;
  box-sizing: border-box;
  vertical-align: middle;
  text-align: center;
  position: absolute;
  z-index: 100000;
  border: solid 1px #777;
  background-color: green;
  padding: 0px;
}

<div class="buttonclass" id="1div" onclick="setColor(1);">
  <img id="1img" src="~/Images/Icons/image1.png">
</div>
<div class="buttonclass" id="2div" onclick="setColor(2);">
  <img id="2img" src="~/Images/Icons/image3.png">
</div>
<div class="buttonclass" id="3div" onclick="setColor(3);">
  <img id="3img" src="~/Images/Icons/image5.png">
</div>

Resetting the other div will make this much more complicated as you will have to store the original src attributes of the images somewhere (for example in a data-src attribute on the img).