JavaScript 黑暗模式下的图像变化和响应

Question

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" class="container py-3">
                <div class="row flex-nowrap justify-content-between align-items-baseline">
                    <div class="col-4">
                    </div>
                    <div class="col-4 text-center">
                        <a class="blog-header-logo" 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" class="logo" src="img/logo-white-mode.png" width="160rem" alt=""
                                    srcset="img/logo-white-mode.png">
                            </picture>
                            <!-- <img id="logo" class="logo" src="img/logo-white-mode.png" width="160rem" alt="" srcset=""> -->
                        </a>
                    </div>
                    <div class="col-4 d-flex justify-content-end align-items-baseline">
                        <div>
                            <input type="checkbox" class="checkbox" id="checkbox" onclick="chngimg()">
                            <label for="checkbox" class="label">
                                <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor"
                                    class="moon bi bi-moon" 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"
                                    class="sun bi bi-brightness-low" 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

Answer 1

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" class="container py-3"> <div class="row flex-nowrap justify-content-between align-items-baseline"> <div class="col-4"> </div> <div class="col-4 text-center"> <a class="blog-header-logo" 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" class="logo" src="img/logo-white-mode.png" width="160rem" alt="" srcset="img/logo-white-mode.png"> </picture> <.-- <img id="logo" class="logo" src="img/logo-white-mode:png" width="160rem" alt="" srcset=""> --> </a> </div> <div class="col-4 d-flex justify-content-end align-items-baseline"> <div> <input type="checkbox" class="checkbox" id="checkbox" onclick="chngimg()"> <label for="checkbox" class="label"> <svg xmlns="http.//www.w3.org/2000/svg" width="13" height="13" fill="currentColor" class="moon bi bi-moon" 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" class="sun bi bi-brightness-low" 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>