Replace folder name in image src attribute on clicking a button

Question

While clicking a button/trigger I need to change the folder path name from img/image.jpg to imgdark/image.jpg for all the instances of the specific class ".imageShift". What ever image name that is inserted in the image src should remain the same through out all the occurrences. Just the "img" folder path has to be replaced with "imgdark". I tried a code given below.

$('.themeColor').click(function () {
    var getId = $(this).attr('id');
    var imagePath = $('.imagePath');
    if (getId === 'darkTheme') {

        imagePath.attr('src', function (index, attr) {
            return attr.replace('img', 'imgdark');
        });
    } else if (getId === 'lightTheme') {
        imagePath.attr('src', function (index, attr) {
            return attr.replace('imgdark', 'img');
        });
    }
});

The above code is working perfectly but on each click I am getting a console error as displayed below. I need to get rid of that console error and also make this work as it does already. Please help with this if anyone have done this already.

Uncaught TypeError: Cannot read property 'replace' of undefined
at HTMLLIElement.<anonymous> (homepage.js:1619)
at z (jquery-3.3.1.min.js:2)
at w.fn.init.attr (jquery-3.3.1.min.js:2)
at HTMLSpanElement.<anonymous> (homepage.js:1617)
at HTMLSpanElement.dispatch (jquery-3.3.1.min.js:2)
at HTMLSpanElement.y.handle (jquery-3.3.1.min.js:2)

Do you have a working jsFiddle example somewhere where you can reproduce the error in the console? — xadhix
– xadhix, Commented Dec 3, 2018 at 9:36
if (getId === 'darkTheme') is there are multiple instances with same id(darkTheme or lightTheme )? — Smollet777
– Smollet777, Commented Dec 3, 2018 at 9:40
Just check if the attr exists before trying to replace it. There seems to be a case where either the attribute or the imagePath class do not exists, so you cannot apply replace on it. I cannot really help you with a solution as i cant see the whole picture, but try using the debugger and step through your function and see why there are cases where the attribute doesn't exists. — Constantin Chirila
– Constantin Chirila, Commented Dec 3, 2018 at 9:41
you have to check whether the imagePath having values @Constantin Chirila noted this issues. you need to check whether the imagePath have values otherwise you dont allow to replace the values — Zaza
– Zaza, Commented Dec 3, 2018 at 9:49
You have a bug. When you change imgdark to img its actualy changing to imgdarkdark. Because replase changing not whole string but part of it imgdarkdark. You nedd to use regex in your replace — Smollet777
– Smollet777, Commented Dec 3, 2018 at 9:52

mdev · Accepted Answer · 2018-12-03 09:53:55Z

1

Use this:

$('.themeColor').click(function () {
var getId = $(this).attr('id');
var imagePath = $('.imagePath');
if (getId === 'darkTheme') {

    imagePath.attr('src', 'imgdark/image.jpg');
} else if (getId === 'lightTheme') {
    imagePath.attr('src', 'img/image.jpg');
}

});

answered Dec 3, 2018 at 9:53

mdev

3591 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Kowshikan Over a year ago

Thanks for the reply. Actually I have multiple instances of the class .imagePath in multiple images. So this code should work for many images with class .imagePath and not only for a single image image.jpg. This code works only for image.jpg. I actually need to change the img/ alone to imgdark/ in all the images which has class .imagePath.

Smollet777 Over a year ago

what if name of the image is changing? Or there are multiple instances?

mdev Over a year ago

OK! test this solution: $('.themeColor').click(function () { var getId = $(this).attr('id'); var imagePath = $('.imagePath'); if (getId === 'darkTheme') { imagePath.attr('src', function (index, attr) { if attr {return attr.replace('img/', 'imgdark/');} }); } else if (getId === 'lightTheme') { imagePath.attr('src', function (index, attr) { if attr { return attr.replace('imgdark/', 'img/');} }); } });

Kowshikan Over a year ago

@mdev Thank you so much. This works. I am not even an intermediate and still I cant figure out how that worked. But thanks for your help. It worked with this if block included inside the function. The console error disappeared. Thanks again

Abdul Samad · Accepted Answer · 2018-12-03 10:52:16Z

1

You could do something like this:

$('.themeColor').click(function () {
  $('.themeColor').removeClass('themeActive');
     var getId = $(this).attr('id');
     var imagePath = $('.imagePath');
     if (getId === 'darkTheme') {
      imagePath.attr('src', imagePath.attr('src').replace('img/', 'imgdark/'));
     } else if (getId === 'lightTheme') {
       imagePath.attr('src', imagePath.attr('src').replace('imgdark/', 'img/'));
     }

    $('.imagePath').each(function(index, val) {
     console.log('You changed the image('+(index+1)+') path to:'+$(this).attr('src'))
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="themeColor" id="darkTheme">Dark</button>
<button class="themeColor" id="lightTheme">Light</button>


<img class="imagePath" src="imgdark/sampleimg.jpg" alt="">
<img class="imagePath" src="imgdark/sampleimg.jpg" alt="">

edited Dec 3, 2018 at 10:52

answered Dec 3, 2018 at 10:03

Abdul Samad

114 bronze badges

1 Comment

Kowshikan Over a year ago

This one works but what happens is it replaces the first occurred image in all the instances of the class .imagePath. So all the image tag has same image. That is the reason why included a function there

mdev · Accepted Answer · 2018-12-03 10:22:02Z

0

Use this:

    $('.themeColor').click(function () {
    var getId = $(this).attr('id');
    var imagePath = $('.imagePath');
    if (getId === 'darkTheme') {

        imagePath.attr('src', function (index, attr) {
            if attr {
              return attr.replace('img/', 'imgdark/');
           }
        });
    } else if (getId === 'lightTheme') {
        imagePath.attr('src', function (index, attr) {
            if attr {
                 return attr.replace('imgdark/', 'img/');
}
        });
    }
});

answered Dec 3, 2018 at 10:22

mdev

3591 silver badge5 bronze badges

1 Comment

Kowshikan Over a year ago

@mdev Thank you so much. This works. I am not even an intermediate and still I cant figure out how that worked. But thanks for your help. It worked with this if block included inside the function. The console error disappeared. Thanks again

Collectives™ on Stack Overflow

Replace folder name in image src attribute on clicking a button

3 Answers 3

4 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related