I have created code where I use setAttribute which works fine but the problem occurs when I remove the attr value. Let me explain an example with code
here is the code
//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>This code works fine but when I remove data-dark attribute then why src='null' error cause is there any solution available so that when we remove data-dark="" the code should take the data-normal value when data-dark attribute is not available
Any kind of help is highly appreciated
You can do like this
$(".dark-toggle").click(function() {
const target = $('#darkroom1');
target.attr("src",
target.data("dark")
|| target.data("normal"));
});