CODEWITHSUNDEEP
javascripthtml
Hob
Hob

Reputation: 139

Onclick change div image along with background color

I have an image as a button inside a div. By default, I am displaying image1 with background green when I click on the div I should change the background colour to blue and change to image2. Right now I am able to only change the colour but not the image. How to change both image and background colour ?

var count = 0;
        
        function setColor(id) {
            var property = document.getElementById(id);
            if (count == 0) {
                property.style.backgroundColor = "blue";
                document.getElementById('1').src = '~/Images/Icons/image1.png';
                count = 1;
            } else {
                property.style.backgroundColor = "green";
                document.getElementById('1').src = '~/Images/Icons/image2.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="1" onclick="setColor(1);" >
    <img id="1" src="~/Images/Icons/image1.png">
</div>

Upvotes: 1

Views: 706

Answers (2)

dustytrash
dustytrash

Reputation: 1590

You already have a variable called 'property', you can use that.

Change your JavaScript to:

var count = 0;  

    function setColor(id) {
        var property = document.getElementById(id);
        if (count == 0) {
            property.style.backgroundColor = "blue";
            property.src = '~/Images/Icons/image1.png';
            count = 1;
        } else {
            property.style.backgroundColor = "green";
            property.src = '~/Images/Icons/image2.png';
            count=0
        }
    }

Or you can shorten this to:

var count = 0;
const COLORS = [
    "blue",
    "green"
];

function setColor(id) {
    var property = document.getElementById(id);

    property.style.backgroundColor = COLORS[count]
    property.src = ('~/Images/Icons/image' + count + '.png';

    var count = count == 0 ? 1 : 0;
}

Upvotes: 2

Canta
Canta

Reputation: 1480

Problem is that you have duplicate ids.

As seen here: An ID should be unique within a page. However, if more than one element with the specified ID exists, the getElementById() method returns the first element in the source code.

You can append something to make them different. Also, i took permission to change status logic.

var initial = true;
        
function setColor(id) {
    var property = document.getElementById(id+"div");
    var propertyImg = document.getElementById(id+"img");
    if (initial) {
        property.style.backgroundColor = "blue";
        propertyImg.src = '~/Images/Icons/image1.png';
    } else {
        property.style.backgroundColor = "green";
        propertyImg.src = '~/Images/Icons/image2.png';
    }
    initial = !initial;
}
.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>

Upvotes: 1

Related Questions