Reputation: 139
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>
Upvotes: 0
Views: 125
Reputation: 360
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.
Upvotes: 1
Reputation: 56853
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
).
Upvotes: 0