replace src element with javascript

Question

I am creating a simple coontent builder for a project. When someone clicks an image, a dialoge box opens and asks them to input the url to replace the src, to input a new alt, and to imput a new title It should replace each of those elements iin the following img tag

Before:

<div class="three">
    <!-- 1 Image -->
    <img id="imageid" src="https://cdn.shopify.com/s/files/1/0645/1401/files/Wellness_700x.png" class="lazyload--fade-in lazyautosizes lazyloaded" alt="" title="" data-iml="333">
</div>`

Results:

<div class="three">https://storage.googleapis.com/support-kms-prod/RrjdySjRxcYJL3NpcXaobwTxuk7zctDbL8rX</div>

The Code

$('.main').on('click', '.element',function(e){
  console.log('Delete Element? ', isDelete(e,this));
  currentSelected = e.target;
  if(!isDelete(e,this)) {
    if(e.target.tagName == "IMG") {
      let imgUrl = prompt('Enter URL Here');
      let imgAlt = prompt('Enter Alt Text Here');
      let imgTitle = prompt('Enter Title Here');
      e.target.parentNode.innerHTML = imgUrl.replace('src=');e.target.parentNode.innerHTML = imgAlt.replace('alt=');
      e.target.parentNode.innerHTML = imgTitle.replace('title=');
    } else if (['h2', 'h3', 'h4', 'h5', 'h6', 'a','p', 'li', 'iframe'].includes(e.target.localName)) {
      if(e.target.localName == 'a') {
        e.target.innerText = prompt('Enter Call To Action Text') + " →";
      } else {
        e.target.innerText = prompt('Enter Heading Text Here');
      }
    }
  } else {
    e.target.remove();
  }
  const code = $('.main__layout-content')[0].outerHTML.replace(/"/g, `'`).split('\n').join('');
  setCookie("code", code, 10);

Peterrabbit · Accepted Answer · 2023-01-15 08:56:27Z

1

If you have to replace any attribute value on an html element just do it the simple way:

// once you have checked that the event target is the img elmt you want...
const img_elmt = e.target;
e.target.src = some_url;

edited Jan 15, 2023 at 8:56

answered Jan 15, 2023 at 7:50

Peterrabbit

2,2651 gold badge5 silver badges19 bronze badges

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

Collectives™ on Stack Overflow

replace src element with 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