Change image when selecting device and return it back after selecting different device-CodePudding

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 >
                <div  id="platform0" onclick="device('platform0', 'Android'); changecolorandroid();">
                    <img src="https://www.freepnglogos.com/uploads/android-logo-png/android-logo-0.png"  id="black-android" data-image="img1">
                </div>
                <div  id="platform1" onclick="device('platform1', 'Apple'); changecolorios();">
                    <img src="https://cdn3.iconfinder.com/data/icons/social-media-logos-glyph/2048/5315_-_Apple-512.png"  id="black-ios" data-image="pic1">
                </div>
            </div>

CodePudding user response：

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 >
                <div  id="platform0" onclick="device('platform0', 'Android'); changecolorandroid();">
                    <img src="https://www.freepnglogos.com/uploads/android-logo-png/android-logo-0.png"  id="black-android" data-image="img1">
                </div>
                <div  id="platform1" onclick="device('platform1', 'Apple'); changecolorios();">
                    <img src="https://cdn3.iconfinder.com/data/icons/social-media-logos-glyph/2048/5315_-_Apple-512.png"  id="black-ios" data-image="pic1">
                </div>
            </div>