Trying to change to different image through url when the device is selected. But after clicking and selecting for example android then selecting ios afterwards the android image is not returning to the previous one and you have to click it again to return to the original image.
This code is just an example what i am trying to do.
Code Example:
function device(select, value){
devicevalue=value;
document.getElementById("platform0").classList.add("platform");
document.getElementById("platform1").classList.add("platform");
document.getElementById("platform0").classList.remove("selectedPlatform");
document.getElementById("platform1").classList.remove("selectedPlatform");
document.getElementById(select).classList.add("selectedPlatform");
document.getElementById(select).classList.remove("platform");
}
function changecolorandroid(){
const img = document.getElementById('black-android');
if (img.dataset.image == "img1") {
img.src = "https://cdn-icons-png.flaticon.com/512/61/61120.png?w=826&t=st=1660038595~exp=1660039195~hmac=2d02a98f85838b7382aa93176eb51e58e99aec95155d52cb082063ffb6395bc3";
img.dataset.image = "img2";
return;
};
if (img.dataset.image == "img2"){
img.src = "https://www.freepnglogos.com/uploads/android-logo-png/android-logo-0.png";
img.dataset.image = "img1";
return;
};
}
function changecolorios(){
const pic = document.getElementById('black-ios');
if (pic.dataset.image == "pic1") {
pic.src = "https://www.freepnglogos.com/uploads/apple-logo-png/apple-logo-png-what-you-need-know-before-rebranding-11.png";
pic.dataset.image = "pic2";
return pic;
};
if (pic.dataset.image == "pic2"){
pic.src = "https://cdn3.iconfinder.com/data/icons/social-media-logos-glyph/2048/5315_-_Apple-512.png";
pic.dataset.image = "pic1";
return;
};
}.devices{
display: flex;
justify-content: center;
box-sizing: border-box;
float: none;
}
.platform{
background: #FFFFFF;
width: 12em;
height: 3em;
border-radius: 1em;
padding-top: 1em;
margin: 1em;
box-shadow: 0 0 0.6em black;
cursor: pointer;
}
.platform:hover{
background:#FFFFFF;
transform: scale(1.1);
box-shadow: 0 0 0.5em #31271c;
}
.devices-pic{
width: 3em;
margin: 0 4em;
}
.devices-pic.ios{
margin: -0.5em 4.5em 0.2em 4.5em;
}
.devices-pic.android{
width: 30%;
margin: -0.5em 4em 0.2em 4em;
}
.selectedPlatform{
background: grey;
width: 12em;
height: 3em;
border-radius: 1em;
padding-top: 1em;
margin: 1em;
box-shadow: 0 0 0.6em white;
cursor: pointer;
}<div class="devices">
<div class="platform" id="platform0" onclick="device('platform0', 'Android'); changecolorandroid();">
<img src="https://www.freepnglogos.com/uploads/android-logo-png/android-logo-0.png" class="devices-pic android" id="black-android" data-image="img1">
</div>
<div class="platform" id="platform1" onclick="device('platform1', 'Apple'); changecolorios();">
<img src="https://cdn3.iconfinder.com/data/icons/social-media-logos-glyph/2048/5315_-_Apple-512.png" class="devices-pic ios" id="black-ios" data-image="pic1">
</div>
</div>>Solution :
After you click an image, you need to reset the other image to the origin state.
Also, you don’t need the if conditions.
const pic = document.getElementById('black-ios');
const img = document.getElementById('black-android');
function device(select, value){
devicevalue=value;
document.getElementById("platform0").classList.add("platform");
document.getElementById("platform1").classList.add("platform");
document.getElementById("platform0").classList.remove("selectedPlatform");
document.getElementById("platform1").classList.remove("selectedPlatform");
document.getElementById(select).classList.add("selectedPlatform");
document.getElementById(select).classList.remove("platform");
}
function changecolorandroid(){
img.src = "https://cdn-icons-png.flaticon.com/512/61/61120.png?w=826&t=st=1660038595~exp=1660039195~hmac=2d02a98f85838b7382aa93176eb51e58e99aec95155d52cb082063ffb6395bc3";
img.dataset.image = "img2";
resetIosImage()
}
function changecolorios(){
pic.src = "https://www.freepnglogos.com/uploads/apple-logo-png/apple-logo-png-what-you-need-know-before-rebranding-11.png";
pic.dataset.image = "pic2";
resetAndriodImage()
}
function resetAndriodImage() {
img.src = "https://www.freepnglogos.com/uploads/android-logo-png/android-logo-0.png";
img.dataset.image = "img1";
}
function resetIosImage() {
pic.src = "https://cdn3.iconfinder.com/data/icons/social-media-logos-glyph/2048/5315_-_Apple-512.png";
pic.dataset.image = "pic1";
}.devices{
display: flex;
justify-content: center;
box-sizing: border-box;
float: none;
}
.platform{
background: #FFFFFF;
width: 12em;
height: 3em;
border-radius: 1em;
padding-top: 1em;
margin: 1em;
box-shadow: 0 0 0.6em black;
cursor: pointer;
}
.platform:hover{
background:#FFFFFF;
transform: scale(1.1);
box-shadow: 0 0 0.5em #31271c;
}
.devices-pic{
width: 3em;
margin: 0 4em;
}
.devices-pic.ios{
margin: -0.5em 4.5em 0.2em 4.5em;
}
.devices-pic.android{
width: 30%;
margin: -0.5em 4em 0.2em 4em;
}
.selectedPlatform{
background: grey;
width: 12em;
height: 3em;
border-radius: 1em;
padding-top: 1em;
margin: 1em;
box-shadow: 0 0 0.6em white;
cursor: pointer;
}<div class="devices">
<div class="platform" id="platform0" onclick="device('platform0', 'Android'); changecolorandroid();">
<img src="https://www.freepnglogos.com/uploads/android-logo-png/android-logo-0.png" class="devices-pic android" id="black-android" data-image="img1">
</div>
<div class="platform" id="platform1" onclick="device('platform1', 'Apple'); changecolorios();">
<img src="https://cdn3.iconfinder.com/data/icons/social-media-logos-glyph/2048/5315_-_Apple-512.png" class="devices-pic ios" id="black-ios" data-image="pic1">
</div>
</div>