Creé un código donde uso setAttribute que funciona bien, pero el problema ocurre cuando elimino el valor attr. Déjame explicarte un ejemplo con código.
aquí está el código
//var darkImage = document.querySelector('#darkroom1'); // (localStorage.getItem('mode')) === 'darkmode' ? darkImage.setAttribute('src', darkImage.getAttribute('data-dark')): darkImage.setAttribute('src', darkImage.getAttribute('data-normal')) //I use local storage also to save that dark logo click $(".dark-toggle").click(function() { document.querySelector('#darkroom1').setAttribute("src", document.querySelector('#darkroom1').getAttribute("data-dark")); }); // this code works fine but when I remove data-dark attribute then why src='null' error cause <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <img id='darkroom1' data-dark="https://ssl.gstatic.com/ui/v1/icons/mail/rfr/logo_gmail_lockup_dark_1x_r4.png" data-normal="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" height="73" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" width="321"/> <div class='dark-toggle'>Click Me</div>Este código funciona bien, pero cuando elimino el atributo data-dark , ¿por qué el error src='null' causa el error? ¿Hay alguna solución disponible para que cuando eliminemos data-dark="" el código debería tomar el valor normal de datos cuando data-dark el atributo no está disponible
Cualquier tipo de ayuda es muy apreciada.
Puedes hacer esto
$(".dark-toggle").click(function() { const target = $('#darkroom1'); target.attr("src", target.data("dark") || target.data("normal")); });