How to dynamically replace a picture src using the replace function in javascript?

Question

I'm trying to dynamically replace the src of some pictures using a the replace functon in javascript. I am not sure how I should write the regex though.

I'd like to replace the terms:1200|990|768|590|petit by something else.

Here's my code:

<div class="row">
            <div class='col20 cs50'>
                <div class="row">
                    <div class="col100">
                        <div class="contenu">
                            <p class='square'>Design and styled with Ulkit.</p>
                        </div>
                    </div>
                    <div class="col100">
                        <div class="contenu">
                            <img class='pictures' src=''>
                        </div>
                    </div>
                </div>
            </div>
            <div class='col40 cs50'>
                <div class="bg-contenu cssmall">5</div>
            </div>
            <div class='col40 cs100'>
                <div class="row">
                    <div class='col50 cs50 '>
                        <div class="contenu">
                            <p class='square'>Flexible, nested grid layout.</p>
                        </div>
                    </div>
                    <div class='col50 cs50'>
                        <div class="contenu">
                            <img class='pictures'src=''>
                        </div>
                    </div>
                    <div class='col100'>
                        <div class="contenu">
                            <img class='pictures'src=''>
                        </div>
                    </div>
                </div>
            </div>
        </div>

Here's the js`var pics=document.getElementsByClassName('pictures');

            function replaceimg(picsize){
                for(i=0;pics.length>i;i++){
                pics[i].src.replace(/1200|990|768|590|petit/,'img/'+picsize+'/cube'+picsize+'.jpg');
                }

            }



            function resizeimg() {
              if (window.innerWidth > 1200) {
                  replaceimg(1200);
              } else if (window.innerWidth < 1200 && window.innerWidth > 990) {
                replaceimg(990)
              } else if (window.innerWidth < 990 && window.innerWidth > 768) {

              } else if (window.innerWidth < 768 && window.innerWidth > 590) {

              } else if (window.innerWidth < 590) {
              }
            };

            resizeimg();`

The .replace() method returns the modified string. It does not change the original string. — Pointy
– Pointy, Commented Feb 28, 2016 at 15:38
Assign its return value back to the .src attribute: pics[i].src = pics[i].src.replace(...) — Pointy
– Pointy, Commented Feb 28, 2016 at 15:47
It is working but I don't understand how. Can you explain why we need to assign the return value by pics[i].src = pics[i].src.replace(...)? — Willy Mercier
– Willy Mercier, Commented Feb 28, 2016 at 16:09
Please share some of the img src samples you have to deal with. — Veverke
– Veverke, Commented Feb 28, 2016 at 16:33

Nico Weiss · Accepted Answer · 2016-02-28 16:16:27Z

1

If you're used to math, x = x + 1 does not make a lot of sense. As said in the comments, you need to assign the return value of the .replace function to your original string to overwrite it.

It takes the original string, and puts the modified string into a new object/string, that's how pretty much any programming language would do it as far as I know.

In your case this would best be visualised by Original = Original.modifyingFunction() or

Modified = Original.modifyingFunction() Original = Modified

answered Feb 28, 2016 at 16:16

Nico Weiss

434 bronze badges

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

Collectives™ on Stack Overflow

How to dynamically replace a picture src using the replace function in javascript?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related