0

I am having small issue. I am trying to replace my src=# attribute that i have in my html, with replace() but I am always getting my inital src. I am trying do display clicked photo in my modal. Target photo is my inital source for src.

My html looks like this:

 <section id="gallery" class="Gallery">
   <div id="photo" class="Gallery__Container">
     <div class="gallery-modal">
       <img class="modal-image" src="#" alt="gallery_modal" />
      </div>
      <figure class="Gallery__Item">   
        <img
          class="Gallery__Photo"
          loading="lazy"
          src="../assets/gal_1.jpg"
          alt="gallery"
          data-src="../assets/gal_1.2a8a9bc795a316356b7fb8363fe0f25f.jpg"
         />
        </figure>
        <figure class="Gallery__Item">
         <img
           class="Gallery__Photo"
           loading="lazy"
           src="../assets/gal_2.jpg"
           alt="gallery"
          />
         </figure>
         <figure class="Gallery__Item">
          <img
            class="Gallery__Photo"
            loading="lazy"
            src="../assets/gal_3.jpg"
            alt="gallery"
           />
         </figure>
        </div>
      </section>

I have bunch of photos that have my initial src And i have my modal-image with src=#

What I was trying is looking like this:

/* get selectors */
const photoGal = document.getElementById('photo');
const galPhotos = document.querySelectorAll('.Gallery__Photo');
const galModal = document.querySelector('.gallery-modal');
const galModalImg = document.querySelector('.modal-image');

/* add listener and replace src */

 const addModalCalss = (e) => {
    let data;

    for (let photo of galPhotos) {
      data = photo.dataset;
      // const photoSrc = galModalImg.getAttribute('src');
      // galModalImg.replace('src="#"', 'src=' + data.src);
      // if (galModalImg.src === undefined) {
      //   galModalImg.toString().replace('src="#"', 'src=' + data.src);
      // }

      // console.log(data.src);
      // console.log(galModalImg.src, 'gal src');
      // console.log(photoSrc);
      // galModalImg.toString().replace('src="#"', 'src=' + data.src);
      // console.log(data.src, 'src');
      console.log(galModalImg.getAttribute('src'), 'html img');
      console.log(photo.dataset.src, 'photo');
      galModalImg.toString().replace('src="#"', 'src=' + data.src);
      console.log(galModalImg.getAttribute('src'), 'html img 2');
    }

    console.log(data.src, 'src');
   // galModalImg.toString().replace('src="#"', 'src=' + data.src);
   // galModal.classList.add('modal-active');
  };



 for (let galImg of galPhotos) {
    galImg.addEventListener('click', addModalCalss);
  }

I want to use dataset. Idea is simple and not sure why this is not working. I am looping through all photos and setting data to photo.dataset. from console logs looks like I am getting my initial src but then galModalImg.toString().replace('src="#"', 'src=' + data.src); this line is not working. Also I have tried galModalImg.getAttribute.toString().replace('src="#"', 'src=' + data.src);

Second issiue that i have it is taht I am getting src only from first photo only :/

Any ideas hov to get this working?

enter image description here

shivetay
  • 315
  • 4
  • 14
  • 1
    "The replace() method returns a new string with some or all matches of a pattern replaced by a replacement." [source](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace) (note the **new string**) – Hans Kesting Aug 30 '21 at 06:50
  • 2
    Does this answer your question? [Replace method doesn't work](https://stackoverflow.com/questions/1433212/replace-method-doesnt-work) – Hans Kesting Aug 30 '21 at 06:53
  • I think you can remove `getAttribute` entierly and just call `galModalImg.setAttribute('src', data.src)`. – Emaro Aug 30 '21 at 07:56

1 Answers1

1

.replace() is not replacing attributes in HTML. It only replaces text in a string.

I suggest this solution:

const replaced_src = galModalImg.toString().replace('#', data.src)
photo.setAttribute('src', replaced_src)
spaceplacepl
  • 55
  • 5