JavaScript Image change on dark mode and responsive-CodePudding

I am changing logo img src on dark mode and on breakpoints, by using img src successfully change on breakpoints and also changes on dark mode as well except that image is not reverting

<source id="logo-large" media="(min-width: 1025px)" srcset="img/logo-white-mode.png">

this is my html of header(navbar)

<header id="header" >
                <div >
                    <div >
                    </div>
                    <div >
                        <a  href="#">
                            <picture>
                                <source id="logo-large" media="(min-width: 1025px)" srcset="img/logo-white-mode.png">
                                <source id="logo-tab" media="(min-width: 600px)" srcset="img/tab-light.jpg">
                                <source id="logo-mob" media="(min-width: 320px)" srcset="img/mob-light.jpg">
                                <img id="logo"  src="img/logo-white-mode.png" width="160rem" alt=""
                                    srcset="img/logo-white-mode.png">
                            </picture>
                            <!-- <img id="logo"  src="img/logo-white-mode.png" width="160rem" alt="" srcset=""> -->
                        </a>
                    </div>
                    <div >
                        <div>
                            <input type="checkbox"  id="checkbox" onclick="chngimg()">
                            <label for="checkbox" >
                                <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor"
                                     viewBox="0 0 16 16">
                                    <path
                                        d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278zM4.858 1.311A7.269 7.269 0 0 0 1.025 7.71c0 4.02 3.279 7.276 7.319 7.276a7.316 7.316 0 0 0 5.205-2.162c-.337.042-.68.063-1.029.063-4.61 0-8.343-3.714-8.343-8.29 0-1.167.242-2.278.681-3.286z" />
                                </svg>
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                     viewBox="0 0 16 16">
                                    <path
                                        d="M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm.5-9.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zm0 11a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zm5-5a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1zm-11 0a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1zm9.743-4.036a.5.5 0 1 1-.707-.707.5.5 0 0 1 .707.707zm-7.779 7.779a.5.5 0 1 1-.707-.707.5.5 0 0 1 .707.707zm7.072 0a.5.5 0 1 1 .707-.707.5.5 0 0 1-.707.707zM3.757 4.464a.5.5 0 1 1 .707-.707.5.5 0 0 1-.707.707z" />
                                </svg>
                                <div class='ball'>
                            </label>
                        </div>
                    </div>
                </div>
            </header>

and this is javascript

const checkbox = document.getElementById('checkbox');
        checkbox.addEventListener('change', () => {
            document.body.classList.toggle('dark');
        });

        function chngimg() {
        var logo_large = document.getElementById('logo-large').srcset;
        var logo_tab = document.getElementById('logo-tab').srcset;
        var logo_mob = document.getElementById('logo-mob').srcset; 
        var img = document.getElementById('logo').src;
        var hdrbtm = document.getElementById('header').style;
        if (img.indexOf('logo-white-mode.png')!=-1) {
            document.getElementById('logo').src  = 'img/logo-dark-mode.png';
            document.getElementById('logo-large').srcset  = 'img/logo-dark-mode.png';
            document.getElementById('logo-tab').srcset  = 'img/tab-dark.jpg';
            document.getElementById('logo-mob').srcset  = 'img/mob-dark.jpg';
            document.getElementById('header').style.borderBottom = '1px solid #cccccc';
            document.getElementById('footer').style.borderTop = '1px solid #cccccc';
        }
         else {
           document.getElementById('logo').src = 'img/logo-white-mode.png';
           document.getElementById('logo-large').srcset  = 'img/logo-light-mode.png';
           document.getElementById('logo-tab').srcset  = 'img/tab-light.jpg';
           document.getElementById('logo-mob').srcset  = 'img/mob-light.jpg';
           document.getElementById('header').style.borderBottom = '1px solid #2b2b2b';
           document.getElementById('footer').style.borderTop = '1px solid #2b2b2b';
       }

    }

I want to change my image on dark mode switch on large breakpoint

CodePudding user response：

you are using the wrong source in Javascript just replace

document.getElementById('logo-large').srcset  = 'img/logo-light-mode.png';

into

document.getElementById('logo-large').srcset = 'img/logo-white-mode.png';

  const checkbox = document.getElementById('checkbox');
    checkbox.addEventListener('change', () => {
        document.body.classList.toggle('dark');
    });

    function chngimg() {
        var logo_large = document.getElementById('logo-large').srcset;
        var logo_tab = document.getElementById('logo-tab').srcset;
        var logo_mob = document.getElementById('logo-mob').srcset;
        var img = document.getElementById('logo').src;
        var hdrbtm = document.getElementById('header').style;
        if (img.indexOf('logo-white-mode.png') != -1) {
            document.getElementById('logo').src = 'img/logo-dark-mode.png';
            document.getElementById('logo-large').srcset = 'img/logo-dark-mode.png';
            document.getElementById('logo-tab').srcset = 'img/tab-dark.jpg';
            document.getElementById('logo-mob').srcset = 'img/mob-dark.jpg';
            document.getElementById('header').style.borderBottom = '1px solid #cccccc';
            document.getElementById('footer').style.borderTop = '1px solid #cccccc';
        }
        else {
            document.getElementById('logo').src = 'img/logo-white-mode.png';
            document.getElementById('logo-large').srcset = 'img/logo-white-mode.png';
            document.getElementById('logo-tab').srcset = 'img/tab-light.jpg';
            document.getElementById('logo-mob').srcset = 'img/mob-light.jpg';
            document.getElementById('header').style.borderBottom = '1px solid #2b2b2b';
            document.getElementById('footer').style.borderTop = '1px solid #2b2b2b';
        }

    }

<header id="header" >
    <div >
        <div >
        </div>
        <div >
            <a  href="#">
                <picture>
                    <source id="logo-large" media="(min-width: 1025px)" srcset="img/logo-white-mode.png">
                    <source id="logo-tab" media="(min-width: 600px)" srcset="img/tab-light.jpg">
                    <source id="logo-mob" media="(min-width: 320px)" srcset="img/mob-light.jpg">
                    <img id="logo"  src="img/logo-white-mode.png" width="160rem" alt=""
                        srcset="img/logo-white-mode.png">
                </picture>
                <!-- <img id="logo"  src="img/logo-white-mode.png" width="160rem" alt="" srcset=""> -->
            </a>
        </div>
        <div >
            <div>
                <input type="checkbox"  id="checkbox" onclick="chngimg()">
                <label for="checkbox" >
                    <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor"
                         viewBox="0 0 16 16">
                        <path
                            d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278zM4.858 1.311A7.269 7.269 0 0 0 1.025 7.71c0 4.02 3.279 7.276 7.319 7.276a7.316 7.316 0 0 0 5.205-2.162c-.337.042-.68.063-1.029.063-4.61 0-8.343-3.714-8.343-8.29 0-1.167.242-2.278.681-3.286z" />
                    </svg>
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                         viewBox="0 0 16 16">
                        <path
                            d="M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm.5-9.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zm0 11a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zm5-5a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1zm-11 0a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1zm9.743-4.036a.5.5 0 1 1-.707-.707.5.5 0 0 1 .707.707zm-7.779 7.779a.5.5 0 1 1-.707-.707.5.5 0 0 1 .707.707zm7.072 0a.5.5 0 1 1 .707-.707.5.5 0 0 1-.707.707zM3.757 4.464a.5.5 0 1 1 .707-.707.5.5 0 0 1-.707.707z" />
                    </svg>
                    <div class='ball'>
                </label>
            </div>
        </div>
    </div>
</header>